**应用于前台页面的图片编辑器、方便、快捷、简单好用、（裁剪、涂鸦、标注、旋转、滤镜...）
安装：**
npm i tui-image-editor
yarn add tui-image-editor
由于是老外开发的，默认的文字描述都是英文，这里我们需要先汉化一下：
const locale_zh = {
ZoomIn: "放大",
ZoomOut: "缩小",
...
},
效果如下：
**自定义样式：**
默认风格为暗黑系，如果想改成白底，或者想改变按钮的大小、颜色等样式，可以使用自定义样式。
const customTheme = {
"common.bi.image": "", // 左上角logo图片
"common.bisize.width": "0px",
"common.bisize.height": "0px",
"common.backgroundImage": "none",
"common.backgroundColor": "#f3f4f6",
"common.border": "1px solid #333",
...},
使用如下：
this.instance = new ImageEditor(
document.querySelector("#tui-image-editor"),
{
includeUI: {
loadImage: {
path: "https://img1.baidu.com/it/u=4131209051,1689521986&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
name: "image",
},
initMenu: "draw", // 默认打开的菜单项
menuBarPosition: "bottom", // 菜单所在的位置
locale: locale_zh, // 本地化语言为中文
theme: customTheme, // 自定义样式
},
cssMaxWidth: 1000, // canvas 最大宽度
cssMaxHeight: 600, // canvas 最大高度
}
);
**以下是调整显示样式以及调整画笔颜色为黑色，虽然写入的是红色**
document.getElementsByClassName("tui-image-editor-main")[0].style.top ="45px"; // 调整图片显示位置
document.getElementsByClassName("tie-btn-reset tui-image-editor-item help")[0].style.display = "none"; // 隐藏顶部重置按钮
document.getElementsByClassName("tui-image-editor-button line")[0].style.display = "none"; // 隐藏直线
document.getElementsByClassName("tie-draw-color tui-image-editor-button")[0].style.display = "none"; // 隐藏颜色
document.getElementsByClassName("tui-image-editor-partition")[0].style.display = "none"; // 隐藏颜色
_that.instance.ui.draw.color = "red";
**为了保证与后端交互所需要的图片格式为黑底白色涂鸦部分的图片，做出以下更改：**
思路：
1、得到上传或者选择的图片数据格式，先处理成4个为一组的数组数据，然后再来解析改变数值为0的改为其他相近值，然后重新生成canvas
2、在重新绘制后就可以开始涂鸦了
2、得到涂鸦后的图片后，再次获取图片数据，先获取不为0的数值改为0黑色，为0的数值给为255白色，然后重新生成canvas就可以得到想要的图片。
以下是需要的方法：
// 获取到图片的一维数组
getImageData(dom, url) {
const ctx = dom.getContext("2d"); // 设置在画布上绘图的环境
const image = new Image();
image.src = url;
//获取画布宽高
const w = dom.width;
const h = dom.height;
return new Promise((resolve) => {
image.onload = function () {
ctx.drawImage(image, 0, 0, w, h); // 将图片绘制到画布上
const imgData = ctx.getImageData(0, 0, w, h); // 获取画布上的图像像素
resolve(imgData.data); // 获取到的数据为一维数组,包含图像的RGBA四个通道数据
ctx.clearRect(0, 0, w, h);
};
});
},
// 转化成多维数组
normalize(data, width, height) {
const list = [];
const result = [];
const len = Math.ceil(data.length / 4);
// 将每一个像素点的rgba四个值组合在一起
for (let i = 0; i < len; i++) {
const start = i * 4;
list.push([
data[start],
data[start + 1],
data[start + 2],
data[start + 3],
]);
}
//根据图形的宽和高将数据进行分类
for (let hh = 0; hh < height; hh++) {
const tmp = [];
for (let ww = 0; ww < width; ww++) {
tmp.push(list[hh * width + ww]);
}
result.push(tmp);
}
return result;
},
// 在保存时改变图形的颜色（黑色、白色）
peeling(data, w, h) {
data = this.normalize(data, w, h); // 转化成多维数组
// 将黑色变成白色 (0,0,0) -> (255,255,255)
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].length; j++) {
//排除透明度的比较
if (data[i][j].slice(0, 3).join("") != "000") {
data[i][j] = [0, 0, 0, data[i][j][3]];
} else {
data[i][j] = [255, 255, 255, data[i][j][3]];
}
}
}
return this.restoreData(data); // 转化成一维数组
},
// 在上传或者选择图片时改变颜色（将黑色改成相近颜色）
peeling1(data, w, h) {
data = this.normalize(data, w, h); // 转化成多维数组
// 将黑色变成相近颜色 (0,0,0) -> (10, 10, 10)
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].length; j++) {
//排除透明度的比较
if (data[i][j].slice(0, 3).join("") == "000") {
data[i][j] = [10, 10, 10, data[i][j][3]];
}
}
}
return this.restoreData(data); // 转化成一维数组
},
// 重新转化成一维数组
restoreData(data) {
const result = [];
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < data[i].length; j++) {
result.push(
data[i][j][0],
data[i][j][1],
data[i][j][2],
data[i][j][3]
);
}
}
return result;
},
//最后重新渲染到画图之后，并且dom为当前图片需要的dom，得到宽高，而不是canvas本身的宽高
drawImage(dom, data) {
const ctx = dom.getContext("2d");
const matrix_obj = ctx.createImageData(dom.width, dom.height);
matrix_obj.data.set(data);
ctx.putImageData(matrix_obj, 0, 0);
},
以上就是所有使用啦~
