**應用于前臺頁面的圖片編輯器膊毁、方便澳骤、快捷挫掏、簡單好用西土、（裁剪杭措、涂鴉拳话、標注珍剑、旋轉钓辆、濾鏡...）
安裝：**
? ? npm i tui-image-editor
? ? yarn add tui-image-editor
由于是老外開發(fā)的缕溉，默認的文字描述都是英文考传，這里我們需要先漢化一下：
? ? 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"); // 設置在畫布上繪圖的環(huán)境
? ? ? ? ? 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);
? ? ? ? },
以上就是所有使用啦~
