币游国际平台

媒体编辑器

最新更新日期:Dec-04-2023

云化媒体编辑器是一个交互用户界面,提供一组常用图像编辑动作,供网站或应用程序用户使用媒体编辑器仅需要原生JavaScript集成化,易于在网络开发框架内使用,并消除开发内部交互式媒体编辑器只需几行代码的必要性编辑帮助缩放内部操作,减少对设计师简单重复任务的依赖结合AI实现简单动作自动化,允许在需要时人工审查/确定媒体资产

重要点

云形支持仅文档配置和带部件提供文件直接修改部件代码及其元素(例如CSS和JS文件)可能中断功能,不支持

上页:

评分本页 :

快速示例

Cloudinary媒体编辑器部件使用网站,包括远程JavaScript文件媒体编辑器方法初始化部件,并具体说明调用时需要的下列信息更新方法 :

云化产品环境云名.
上头公共标识图像编辑

上头显示显示方法调用显示初始化部件

Html


<script src="https://media-editor.www.agrosoland.com/all.js" type="text/javascript"></script>
<script>
const myEditor = cloudinary.mediaEditor();
myEditor.update({
  publicIds: ["sample"],
  cloudName: "demo"
});
myEditor.show();
myEditor.on("export",function(data){
  console.log(data);
})
</script>

已知问题

互联网探索者11不支持
移动设备不支持
反转或旋转交互裁剪后, root重置选择预设初始值, 并需要重新裁剪图像。

工作流

向网站添加云编辑器部件

包含 JavaScript文件:https://media-editor.www.agrosoland.com/all.js.
初始化媒体编辑器部件并发cloudinary.mediaEditor()方法论
更新媒体编辑器配置并发更新(选项)方法论
显示媒体编辑器部件并发show()方法论

小技巧

查查媒体编辑器交互演示并试出一些配置选项显示不覆盖所有可能的选项, 生成执行选项必备代码, 并制作理想游乐场启动部件

开工包含 JavaScript文件

媒体编辑器全部功能都包含https://media-editor.www.agrosoland.com/all.jsJavaScript文件文件优化后通过快速CDN交付

例举 :

Html

<script src="https://media-editor.www.agrosoland.com/all.js" type="text/javascript">  
</script>

二叉初始化媒体编辑器部件

JavaScript初始化方法在包括媒体编辑器JavaScript文件后公开提供云化并授权访问cloudinary.mediaEditor(options)方法论方法创建媒体编辑器内存实例

例举 :

const myEditor = cloudinary.mediaEditor();

如果要部件在页面上现有内含元素内打开,可传递媒体编辑器方法目标元素使用选择器或DOM元素附加程序参数,例如

const myEditor = cloudinary.mediaEditor({appendTo: document.getElementById("my-widget-container");});
  // OR
const myEditor = cloudinary.mediaEditor({appendTo: '#my-widget-container'})

注解

显示模态时,元件z-index定值高达99999覆盖css可改变z-index cld-media-editor-iframe栈顺序,例如

#cld-media-editor-iframe {
  z-index: 100 !important
}

3级更新媒体编辑器部件

上头更新(选项)方法配置媒体编辑器选项对象包含配置图参数类应用程序

选项必须至少包含下列2项参数:

云化产品环境云化Name参数化
上头公共标识带图像公开编辑的参数

完整链表可配置媒体编辑器部件,见参数表格中

举例说,用图像标本更新即时部件

myEditor.update({ 
  cloudName: "demo",    
  publicIds: ["sample"],
});

注解

顺序编辑私有或验证部件内资产使用签名解决交付签名的方法受限资产

4级显示媒体编辑器部件

上头媒体编辑器方法创建并初始化部件,但直到show()返回实例方法调用

例举 :

myEditor.show();

全表可用方法见实例方法媒体编辑器API引用

图像配置

媒体编辑器有各种编辑图片选项所有图像编辑参数均在a内提供图像显示对象参数

例举 :

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["sample"],
  image: {
    // image editing parameters are included here
  }
});

注解

所有变换使用JavaScript语法查看剩余文档变换示例时,可修改JS标签显示遗留代码示例

图像部件阶梯

使用阶梯参数定义哪些步骤包括在部件中

可能的值 :

例举 :

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["sample"],
  image: {
    steps: [     
      "resizeAndCrop",
      "imageOverlay",
      "textOverlays",
      "export"
    ]
  }
});

注解

默认值安卓重排并导出步骤已经包含,如果你不添加阶梯参数化
可改变阶梯顺序上头安卓重排,文本重叠并图像重叠阶梯显示部件中与给定顺序相同阶梯参数化上头导出步骤应始终为最后一步

变大小裁剪

缩放裁剪步使用户选择预定义图像重定位选项,使用裁剪柄手工裁剪图像并翻转或旋转图像

使用安卓重排参数填充媒体编辑器数组预置用户可以从中选择,以便调整大小并裁剪图像数组中每个预设可预定义快捷键或可定义为自定义预置带标签标签,宽度,高度显示和/或方面Ratio.上头指南Url属性允许向显示器右侧添加信息图像(带裁剪指令等)。

看缩放Props选项获取更多可用选项细节

注解

默认包括下列预设值:原创式16:9、横向4:3、纵向3:4和Prait9:16

添加Twitterad和LinkedInad预定义快捷键以及定制预设标签Coverad和维度500x1000

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["sample"],
  image: {
    steps: ["resizeAndCrop"],
    resizeAndCrop: {
      presets: ["facebookAd", "twitterAd", 
        {label: "Cover Ad", width: 500, height: 1000 }], 
      guidelinesUrl: "https://my.example.com/cropping_help.jpg"
    }
  }
});

图像叠加

图像叠加脚步功能使用户选择图像叠加基础图像重叠选项中的每一选项都由一组属性定义,包括基像大小和允许位置供用户选择

使用图像重叠参数填充媒体编辑器数组叠加用户从中选择
数组内的每一叠加用定义公共标识,标签标签中任变换并允许数组placementOptions下方选择由绑定盒(宽高)、基图像定位(重力)和从所选位置(x和y)偏移
上头指南Url属性允许向显示器右侧添加信息图像(带叠加指令等)。

看ImageOverlayProps选项获取更多可用选项细节

插件增加2个选项如下:带黑白效果图像应用和2定位选项,带负效果图像应用和单定位选项

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["flower"],
  image: {
    steps: ["imageOverlay"],
    imageOverlay: {
      overlays: [
         {
          "publicId": "logo",
          "label": "Logo",
          "transformation": [{ "effect": "blackwhite" }],
          "placementOptions": [{
              "x": 10,
              "y": 10,
              "width": 400,
              "height": 400,
              "gravity": "north_west"
            },
            {
              "x": 0,
              "y": 0,
              "width": 400,
              "height": 400,
              "gravity": "north_east"
            }
          ]
        },
        {
          "publicId": "logo_text",
          "label": "Logo with Text",
          "transformation": [{ "effect": "negative" }],
          "placementOptions": [{
              "x": 0,
              "y": 0,
              "width": 400,
              "height": 400,
              "gravity": "north_east"
         }
      ],
      guidelinesUrl: "https://my.example.com/overlay_help.jpg"
    }
  }
});

文本叠加

文本叠加步段使用户向基础图像添加文本上传图像后,叠装可重排大小,文本可编辑,颜色、字体和样式可更新,叠装可拖到图像内的任何位置编辑支持多行文本框并显示对齐网格帮助定位图像内文本叠加或对齐2文本框

使用文本重叠参数自定义文本叠加步数并附下列属性:

上头字体学属性定义允许字体数组默认值(所有嵌入字体):Ariel Verdana,Helvetica,TrebuchetMS,TimesNew Roman,Georgia,CourierNew,Open Sants,Roboto,Montserrat
上头预置属性定义数组文本重叠预设供用户选择默认值 :标题人子标题标题
上头指南Url属性向显示器右侧添加信息图像
上头初始颜色属性定义数组用户选择默认值 :#ffffff,#000
上头显示ColorPicker布林属性设置颜色选择器是否可供用户选择颜色

使用自定义字体注解

所有自定义字体需要先上传云性原生,验证文件.
自定义字体上传验证文件,你也需要实现签名部件返回访问受限资产时需要签名的方法
需要指定字体满公共标识(作为原始文件,它包括扩展部分)

看TextOverlaysProps选项获取更多可用选项细节

允许三种可能的字体选项(Arial、Times新罗马和定制字体MyFont)和预定义4预设

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["flower"],
  image: {
    steps: ["textOverlays"],
    textOverlays: {
      fonts: [
        "Arial",
        "Times New Roman",
        {
          font: "MyFont",
          styles: {
            regular: "fonts/MyFont-Regular.ttf",
            bold: "fonts/MyFont-Bold.ttf",
            italic: "fonts/MyFont-Italic.ttf",
            boldItalic: "fonts/MyFont-BoldItalic.ttf",
            underline: true
          }
        }
      ],
      presets: [
        "heading", // predefined preset
        "body", // predefined preset
        {
          label: "Custom Subtitle",
          previewText: "DEF",
          size: 40,
          font: "MyFont", // requires the MyFont font to be defined in the fonts property
          weight: "normal",
          style: "normal",
          color: "#ffffff",
          underline: true
        },
        {
          label: "My Header",
          previewText: "ABC",
          size: 70,
          font: "Arial", // requires the Arial font to be defined in the fonts property
          weight: "bold",
          style: "italic",
          color: "#fbff3a",
          underline: true
        }
      ],
      initialColors: ["#3448c5", "#ff5050","#f7bc00"," #48c4d8" ,"#0052cc", "#a600cc", "#8ecc00"],
      showColorPicker: false,
      guidelinesUrl: "https://my.example.com/overlay_help.jpg"
    }
  }
});
// for custom fonts you need a signature service running.

myEditor.onSign(function (data) {
  return new Promise(function (resolve) {
    // you need to replace this with a working end-point with your signature service
    fetch(
      "http://my.endpoint.com/asset${encPath(data.publicId)}${encPath(
        data.resourceType
      )}${encPath(data.type)}${encPath(data.transformation)}"
    )
      .then((response) => response.json())
      .then((d) => resolve(d));
  });
});

导出

导出阶梯使用户从提供导出选项中选择

使用导出参数填充媒体编辑器数组格式化并质量问题从中选择并显示 HTTPS URL和下载选项

看导出Props选项获取更多可用选项细节

例举 :

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["flower"],
  image: {
    steps: ["export"],
    export: {  
      "formats": [
        "auto",
        "png",
        "webp"
      ],
      "quality": [
        "auto",
        55,
        75,
        "low"
      ],
      "download": false,
      "share": false
    }
  }  
});

视频配置

重要点

视频播放媒体编辑器支持目前Beta参数名称或其他实现细节在通用访问发布前可能有小修改我们邀请你试一试请求通过我们的反馈支持团队.

媒体编辑器也可以用于编辑视频指定PublicID视频编辑并包括资源类型属性集为视频视频编辑参数在a内提供视频播放对象参数

例举 :

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: [{
    publicId: "sample_vid",
    resourceType: "video"
  }],
  video: {
    // Video editing parameters are included here
  }
});

视频部件阶梯

使用阶梯参数定义哪些视频步骤包括在部件中当前部件只支持单片修剪台阶上

例举 :

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: [{
    publicId: "sample_vid",
    resourceType: "video"
  }],
  video: {
    steps: [     
      "trim"
    ]
  }
});

纹理

修饰步令允许用户使用修饰柄手动裁剪视频长度可添加修剪柄初始位置启动开关并端置属性对修剪参数对象并可选定义最大值并minDuration语言剪裁视频

例举 :

const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: [{
    publicId: "sample_video",
    resourceType: "video"
  }],
  video: {
    steps: ["trim"],
    trim: {
      startOffset: 2,
      endOffset: 10,
      maxDuration: 8,
      minDuration: 5
    }
  }
});

编辑事件

可注册各种媒体编辑器部件事件,以便在应用中引入自定义行为,或一旦应用部署后用于分析跟踪使用上方法初始化部件注册例举注册初始化myEditor媒体编辑部件页眉点击事件数 :

myEditor.on("headerclick", (data) => {
  console.log("HeaderClick: ", data);
});

重要点

用户完成与部件交互后,如果你希望您的代码访问最终交付URL,请确认注册 导出事件,当用户点击时调用导出按钮.

全表可用事件见事件处理媒体编辑器API引用

本地化

部件中所用文本可全量定制供不同语言或局部使用语言类对象参数字符串对每种语言使用消息传递参数接受JSON结构定义每种语言文本元素使用值上头局部化参数集从消息参数定义的字符串选项使用en-US默认)置为默认值时,只需包括想置为默认值的元素

全部默认值可见于 :https://media-editor.www.agrosoland.com/widget/messages.json.

例例,只定制页眉并作物-预置-平方文本写法


const myEditor= cloudinary.mediaEditor();
myEditor.update({
  cloudName: "demo", 
  publicIds: ["flower"], 
  language: {
    locale: 'en_US',
    messages: {
      en_US: { 
        "header": "Edit Image",
        "crop": {
          "presets": {
            "square": "Square",
          }
        }
      }
    }
  }
});

媒体编辑器部件引用

所有可用方法、参数和事件细节见媒体编辑器引用.

反馈发送

✖️

错误

不幸有错误发送反馈