获取用户素材

前端集成MuseDAM素材选择器

可以通过嵌入iframe的方式，让用户方便地选择空间中的素材，从而在第三方应用中使用MuseDAM中的素材。整个流程分为3个步骤：

通过iframe接入到第三方应用中
用户选择需要的素材后点击确认
素材选择器通过window.postMessage进行数据回流

React接入示例：

import React, { useEffect } from "react";
 
export default () => {
  //获取素材选择信息
  useEffect(() => {
    window.addEventListener("message", receiveMessage, false);
    return () => {
      window.removeEventListener("message", receiveMessage);
    };
  }, []);
 
  const receiveMessage = (event) => {
    if (event?.data?.type === "museDAM-selector-page-mounted") {
      // iframe 页面加载完成，可以传入配置参数
      const iframe = document.getElementById("iframe");
      iframe.contentWindow.postMessage(
        {
          type: "museDAM-selector-init",
          data: {
            // dataLimit用于描述可选择的文件类型，以及可选择的最大数量
            dataLimit: [
              { type: "image", limit: 5 },
              { type: "audio", limit: 9 },
            ],
          },
        },
        "*"
      );
      return;
    }
 
    if (event?.data?.type === "museDAM-selector-page-unMounted") {
      // iframe 页面卸载
      return;
    }
    if (event?.data?.type === "museDAM-selector-confirm") {
      // 点击【确认】 按钮 -- 这里接收已选择的素材集合
      // todo
      const assets = event?.data?.payLoad.selectedAssets;
      console.log(assets);
      return;
    }
    if (event?.data?.type === "tezign-selector-cancel") {
      // 点击【取消】 按钮
      // todo
      console.log(event.data);
      return;
    }
  };
 
  const iframeUrl = "https://musedam.cc/outer/selector";
  return (
    <div>
      <iframe src={iframeUrl} id="iframe" />
    </div>
  );
};

其中，第三方应用中能接收到的事件如下：

事件类型	描述
museDAM-selector-page-mounted	页面加载成功
museDAM-selector-page-unMounted	页面卸载
museDAM-selector-confirm	确认
museDAM-selector-cancel	取消

第三方应用可以在museDAM-selector-page-mounted事件触发后，向素材选择器发送初始化事件，从而控制可选择的素材类型和最大数量。具体使用方式参考示例：

const iframe = document.getElementById("iframe");
iframe.contentWindow.postMessage(
  {
    type: "museDAM-selector-init",
    data: {
      // dataLimit用于描述可选择的文件类型，以及可选择的最大数量
      dataLimit: [
        { type: "image", limit: 5 },
        { type: "audio", limit: 9 },
      ],
    },
  },
  "*"
);

对于museDAM-selector-confirm事件，可以通过event.data.payLoad.selectedAssets取到所选的素材详情。素材详情的数据结构如下：

interface SelectedAsset {
  downloadUrl: string; // 素材下载地址
  extension: string; // 素材类型
  height: number; // 素材高度
  width: number; // 素材宽度
  id: number; // 素材id
  name: string; // 素材名称
  thumbnail: {
    extension: string; // 缩略图类型
    gifStaticUrl: string; // gif缩略图封面
    height: number; // 缩略图高度
    width: number; // 缩略图宽度
    url: string; // 缩略图地址
  };
}

通过 API 查询用户素材

可以直接通过API来访问用户的素材信息，并支持相关的检索，如按颜色检索、按关键字检索。

Authorization: TOKEN_TYPE TOKEN
POST https://open.musedam.cc/open-api/standard/call/muse/material-list

请求参数	类型	描述
parentId	number	文件夹id，不传默认根目录
smartFolderId	number	智能文件夹id
needChild	boolean	是否包含子目录下的素材默认false
parentId	number	文件夹id，不传默认根目录
extensions	string[]	后缀名，如 jpeg
color	string	颜色，如 #E5E569
areaThreshold	number	颜色面积占比，如 20=20%
colorThreshold	number	颜色阈值，如 20=20%
keywords	string[]	检索关键字
startPoint	number	分页参数，开始
endPoint	number	分页参数，结束

请求示例：

curl --location 'https://open.musedam.cc/open-api/standard/call/muse/material-list' \
--header 'Content-Type: application/json' \
--header 'Authorization: TOKEN_TYPE TOKEN' \
--data '{
    "parentId": 0,
    "extensions": [
        "jpeg"
    ],
    "color": "",
    "areaThreshold": 20,
    "colorThreshold": 20,
    "keywords": [],
    "startPoint": 0,
    "endPoint": 40
}
'

请求成功后，将获得如下格式的数据：

通用字段	类型	描述
code	string	状态码，0=成功，其他状态码见《通用错误码》
message	string	错误信息
result	object	结果对象

result字段	类型	描述
total	number	素材总数
materials	object[]	素材列表

materials字段	类型	描述
parentIds	number[]	素材所属文件夹
userId	number	userId
name	string	名称
downloadUrl	string	下载链接
source	string	素材来源 (1:插件，2:上传，4:转存)
extension	string	后缀名
duration	number	时长
size	number	大小
width	number	宽
height	number	高
description	string	描述
score	number	评分
createTime	number	创建时间
createUser	number	创建人userId
updateTime	number	更新时间
updateUser	number	更新人userId
thumbnailAccessUrl	string	素材缩略图
tags.name	string	素材标签名称
imageContentAnalysis.aiTags	string	智能标签信息
imageContentAnalysis.aiTitle	string	智能标签名称
imageContentAnalysis.aiDescription	string	智能描述
imageContentAnalysis.aiDetailedDescription	JSONArray	智能描述详情

响应示例：

{
  "code": "0",
  "message": "处理成功",
  "result": {
    "materials": [
      {
        "id": 6903187,
        "parentIds": null,
        "userId": "null",
        "name": "2.jpeg",
        "downloadUrl": "",
        "source": null,
        "link": null,
        "extension": "jpeg",
        "duration": null,
        "size": 27856,
        "width": 400,
        "height": 589,
        "description": null,
        "score": null,
        "createTime": 1726656104000,
        "createUser": "null",
        "updateTime": 1726656104000,
        "updateUser": 1673603133161799680,
        "tags": [
          {
            "name": "SDXL"
          },
          {
            "name": "MuseAI"
          }
        ],
        "thumbnailAccessUrl": ""
      }
    ],
    "total": 1
  }
}