最近有一个新需求 要编辑图片 类似于美图秀秀可以插入图层文字说明裁剪什么的
搜遍全网找到了这么一个插件叫 tui-image-editor ;
官方文档链接:www.npmjs.com/package/tui…
API链接：nhn.github.io/tui.image-e…（纯英文预警）
话不多说 开干
下载
npm i tui-image-editor
// or
yarn add tui-image-editor
引入
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
const ImageEditor = require("tui-image-editor");
汉化
const locale_zh = {
// override default English locale to your custom
Crop: "裁剪",
Load: '替换图片',
DeleteAll: "全部删除",
Delete: "删除",
Undo: "撤销",
Redo: "反撤销",
Reset: "重置",
Flip: "镜像",
Rotate: "旋转",
Draw: "画",
Shape: "形状标注",
Icon: "图标标注",
Text: "文字标注",
Mask: "遮罩",
Filter: "滤镜",
Bold: "加粗",
Italic: "斜体",
Underline: "下划线",
Left: "左对齐",
Center: "居中",
Right: "右对齐",
Color: "颜色",
"Text size": "字体大小",
Custom: "自定义",
Square: "正方形",
Apply: "应用",
Cancel: "取消",
"Flip X": "X 轴",
"Flip Y": "Y 轴",
Range: "区间",
Stroke: "描边",
Fill: "填充",
Circle: "圆",
Triangle: "三角",
Rectangle: "矩形",
Free: "曲线",
Straight: "直线",
Arrow: "箭头",
"Arrow-2": "箭头2",
"Arrow-3": "箭头3",
"Star-1": "星星1",
"Star-2": "星星2",
Polygon: "多边形",
Location: "定位",
Heart: "心形",
Bubble: "气泡",
"Custom icon": "自定义图标",
"Load Mask Image": "加载蒙层图片",
Grayscale: "灰度",
Blur: "模糊",
Sharpen: "锐化",
Emboss: "浮雕",
"Remove White": "除去白色",
Distance: "距离",
Brightness: "亮度",
Noise: "噪音",
"Color Filter": "彩色滤镜",
Sepia: "棕色",
Sepia2: "棕色2",
Invert: "负片",
Pixelate: "像素化",
Threshold: "阈值",
Tint: "色调",
Multiply: "正片叠底",
Blend: "混合色",
Double: '双击',
Download: '预览图片'
// etc...
};
自定义样式
const customTheme = {
// image 坐上角度图片
"common.bi.image": "", // 在这里换上你喜欢的logo图片
"common.bisize.width": "0px",
"common.bisize.height": "0px",
"common.backgroundImage": "none",
"common.backgroundColor": "#f3f4f6",
"common.border": "1px solid #444",
// header
"header.backgroundImage": "none",
"header.backgroundColor": "#f3f4f6",
"header.border": "0px",
"header.margin": "0px auto",
// load button
"loadButton.backgroundColor": "#fff",
"loadButton.border": "1px solid #ddd",
"loadButton.color": "#222",
"loadButton.fontFamily": "NotoSans, sans-serif",
"loadButton.fontSize": "12px",
// "loadButton.width": "150px",
// "loadButton.display": "none", // 可以直接隐藏掉
// download button
"downloadButton.backgroundColor": "#fdba3b",
"downloadButton.border": "1px solid #fdba3b",
"downloadButton.color": "#fff",
"downloadButton.fontFamily": "NotoSans, sans-serif",
"downloadButton.fontSize": "12px",
// "downloadButton.display": "none", // 可以直接隐藏掉
// icons default
"menu.normalIcon.color": "#8a8a8a",
"menu.activeIcon.color": "#555555",
"menu.disabledIcon.color": "#434343",
"menu.hoverIcon.color": "#e9e9e9",
"submenu.normalIcon.color": "#8a8a8a",
"submenu.activeIcon.color": "#e9e9e9",
"menu.iconSize.width": "24px",
"menu.iconSize.height": "24px",
"submenu.iconSize.width": "32px",
"submenu.iconSize.height": "32px",
// submenu primary color
"submenu.backgroundColor": "#1e1e1e",
"submenu.partition.color": "#858585",
// submenu labels
"submenu.normalLabel.color": "#858585",
"submenu.normalLabel.fontWeight": "lighter",
"submenu.activeLabel.color": "#fff",
"submenu.activeLabel.fontWeight": "lighter",
// checkbox style
"checkbox.border": "1px solid #ccc",
"checkbox.backgroundColor": "#fff",
// rango style
"range.pointer.color": "#fff",
"range.bar.color": "#666",
"range.subbar.color": "#d1d1d1",
"range.disabledPointer.color": "#414141",
"range.disabledBar.color": "#282828",
"range.disabledSubbar.color": "#414141",
"range.value.color": "#fff",
"range.value.fontWeight": "lighter",
"range.value.fontSize": "11px",
"range.value.border": "1px solid #353535",
"range.value.backgroundColor": "#151515",
"range.title.color": "#fff",
"range.title.fontWeight": "lighter",
// colorpicker style
"colorpicker.button.border": "1px solid #1e1e1e",
"colorpicker.title.color": "#fff"
};
使用
我这里的需求是点编辑弹框然后操作图片
//html
<button class="move_group" @click="editPic" ref="modify">编辑</button>
<el-dialog title="素材编辑" :modal-append-to-body="false" :append-to-body="true" :visible.sync="editImgDialogVisible" custom-class="edit_image_dialog" width="1000px" :close-on-click-modal="false" @close="closeEditGroupItem">
<div style="padding:20px">
<div id="tui-image-editor"></div>
</div>
<span slot="footer" class="dialog-footer" style="margin-top:-20px">
<el-button @click="editImgDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="uploadEditImg">完 成</el-button>
</span>
</el-dialog>
//js
data(){
return {
instance:null
}
},
methods:{
editPic () {
this.$nextTick(() => {
this.instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
usageStatistics: false,//这个一定要写要不然会报错
includeUI: {
loadImage: {
path: url,//加载的图片链接
name: 'image',//图片名称（不重要）
},
//操作菜单栏
menu: [
"crop", // 裁切
"flip", // 翻转
"rotate", // 旋转
"draw", // 添加绘画
"shape", // 添加形状
// "icon", // 添加图标
"text", // 添加文本
"mask", // 添加覆盖
"filter", // 添加滤镜
],
menuBarPosition: "top",//操作栏位置
locale: locale_zh,//语言
theme: customTheme,//主题样式
},
// cssMaxWidth: 700,//宽
// cssMaxHeight: 900,//高
})
})
},
}
这样基本上就完成了开始操作图片就好了
界面就是这个样子的
然后！！有一个大坑！
添加遮罩图片的时候点半天点不到
就是这个鬼东西 点了没反应
我去研究了一上午的文档也没有相关的说明
然后我就打开f12看了一下dom
这个东西 没有宽高 所以点不到……
所以只要在样式里加上个display:block就好了……
.tui-image-editor-submenu-item > li > .tui-image-editor-button > div > .tie-mask-image-file {
display: block !important;
}
保存图片
然后操作完就是保存图片啦
//将编辑图片转为base64文件流并上传
uploadEditImg () {
const base64String = this.instance.toDataURL();
const data = window.atob(base64String.split(",")[1]);
const ia = new Uint8Array(data.length);
for (let i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
}
const file = new File([ia], 图片名称, { "type": "image/png" });
const fd = new FormData();
fd.append("file", file);
fd.append("groupId", this.editGroupId);
fd.append("type", 4);
editResource(fd).then(res => {
this.editImgDialogVisible = false
this.$message({
message: '编辑成功',
type: 'success'
})
this.getList()
})
},
好啦 over。
