npm i tui-image-editor yarn add tui-image-editor 由于是老外开发的,默认的文字描述都是英文,这里我们需要先汉化一下: const locale_zh = { ZoomIn: "放大", ZoomOut: "缩小", ... }, 效果如下: **自定义样式:** 默认风格为暗黑系,如果想改成白底,或者想改变按钮的大小、颜色等样式,可以使用自定...
// 底部菜单按钮列表 隐藏镜像flip和遮罩mask 201 initMenu: 'draw', // 默认打开的菜单项 202 menuBarPosition: 'bottom', // 菜单所在的位置 203 locale: locale_zh, // 本地化语言为中文 204 theme: customTheme // 自定义样式 205 206 }, 207 cssMaxWidth: 1000, // canvas 最大宽度 208 cssMax...
{includeUI: {loadImage: {path: image,name:"image", },initMenu:"",// 默认打开的菜单项menuBarPosition:"right",// 菜单所在的位置// 汉化locale: localeCN,// 自定义样式(隐藏默认顶部栏目、按钮颜色。。。)theme: customTheme },cssMaxWidth:1000,// canvas 最大宽度cssMaxHeight:1000,// canvas 最...
通过自定义样式,我们看到右上角的 Load 和 Download 按钮已经被隐藏了,接下来我们再隐藏掉其他用不上的按钮(根据业务需要),并添加一个保存图片的按钮。 <template><el-buttontype="primary"size="small"@click="save">保存</el-button></template>// ...methods: {init() {this.instance=newImageEditor(doc...
{...}|null| |upload|如果没有传递自定义onApply,在确认时,编辑后的图像将被传递给 AssetManager 的上传器和结果(例如,而不是你的 dataURL 'll have the URL) will be passed to the defaultonApplyprocess (update target, etc.)|false| |onApplyButton|一旦创建,应用按钮 (HTMLElement) 将作为参数传递...
style.display = 'none' // 隐藏顶部重置按钮 }, // 保存图片,并上传 save() { const base64String = this.instance.toDataURL() // base64 文件 console.log('base64String', base64String) const data = window.atob(base64String.split(',')[1]) const ia = new Uint8Array(data.length) for...
默认风格为暗黑系,如果想改成白底,或者想改变按钮的大小、颜色等样式,可以使用自定义样式。 const customTheme = { "common.bi.image": "", // 左上角logo图片 "common.bisize.width": "0px", "common.bisize.height": "0px", "common.backgroundImage": "none", "common.backgroundColor": "#f3f4...