uni-image-editor 1.0.0

package/js/editor.js

@@ -0,0 +1,1179 @@
+/*
+ * @Author: msc 862078729@qq.com
+ * @Date: 2024-04-25 17:48:23
+ * @LastEditors: msc 862078729@qq.com
+ * @LastEditTime: 2024-06-15 18:12:42
+ * @FilePath: \code\components\image-editor\image-editor.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+import {
+    IMG_EDITOR_GRAFFITI_SHAPE_TYPE,
+    IMG_EDITOR_RENDER_TYPE,
+    IMG_EDITOR_EDIT_TYPE,
+    CAN_CANCEL_EDIT_TYPE,
+} from "./const";
+
+import { renderAwait, validImgHasEmpty, base64ToUrl, clearUrlBlobCache, pick, findLastIndex, uniqueId } from "./utils";
+
+export default class Editor {
+    constructor(opts) {
+        // 解构赋值，从传入的opts对象中提取配置参数
+        const {
+            // 画布ID
+            canvasId,
+            // 原始图片资源
+            originImgUrl,
+            // 画布的宽度
+            width,
+            // 画布的高度
+            height,
+            // 默认画笔颜色，默认为"#000000"（黑色）
+            defaultColor = "#000000",
+            // 默认画笔粗糙度，默认为1
+            defaultRough = 1,
+            // 默认填充颜色，默认为"#000000"（黑色）
+            defaultFillColor = "#000000",
+            // 默认字体大小，默认为12
+            defaultFontSize = 12,
+            // Vue实例，用于在Vue环境下操作DOM或触发事件
+            vueInstance,
+            // 更新图片时的回调函数
+            updateImgUrlCb,
+            // 更新步骤时的回调函数
+            updateStepCb,
+            // 渲染图片完成后的回调函数
+            renderImgCb,
+            // 更新编辑记录数据的回调函数
+            updateEditRecordDataCb,
+            // 更新渲染加载状态回调函数
+            renderCanvasLoadingCb,
+            // 是否编辑后校验
+            editFinishValid = false,
+            // 转化初始化图片
+            initConvert = false,
+            // 图片最大透明占比
+            maxTransparencyRate = 5
+        } = opts;
+
+        // 初始化成员变量
+        this.canvasId = canvasId; // 画布ID
+        this.originImgData = {
+            url: originImgUrl,
+            tempFilePath: "",
+            width: width,
+            height: height,
+        };
+        this.width = width; // 画布宽度
+        this.height = height; // 画布高度
+        this.defaultColor = defaultColor; // 默认画笔颜色
+        this.defaultRough = defaultRough; // 默认画笔粗糙度
+        this.defaultFillColor = defaultFillColor; // 默认填充颜色
+        this.defaultFontSize = defaultFontSize; // 默认字体大小
+
+        // 回调函数
+        this.updateStepCb = updateStepCb; // 更新步骤时的回调函数
+        this.updateImgUrlCb = updateImgUrlCb; // 更新图片时的回调函数
+        this.renderImgCb = renderImgCb; // 渲染图片完成后的回调函数
+        this.updateEditRecordDataCb = updateEditRecordDataCb; // 更新编辑记录数据的回调函数
+
+        this.renderCanvasLoadingCb = renderCanvasLoadingCb
+
+        this.vueInstance = vueInstance; // Vue实例
+
+        // 上下文对象，用于在画布上绘制
+        this.ctx = null;
+
+        // 编辑记录数据数组
+        this.editRecordData = [];
+
+        // 当前编辑步骤，初始化为-1
+        this.curStep = -1;
+
+        // 初始化编辑器
+        this.init(initConvert);
+
+        // 编辑状态，初始化为false（非编辑状态）
+        this.editting = false;
+
+        this.renderCanvasLoading = false
+
+        this.editFinishValid = editFinishValid
+
+        this.maxTransparencyRate = maxTransparencyRate
+
+    }
+
+    // 初始化方法
+    async init(initConvert = false) {
+        this.renderCanvasLoading = true;
+
+        this.renderCanvasLoadingCb && this.renderCanvasLoadingCb(this.renderCanvasLoading)
+
+        await renderAwait(50)
+        // 创建画布上下文，传入画布ID和Vue实例（如果在Vue环境下）
+        this.ctx = uni.createCanvasContext(this.canvasId, this.vueInstance);
+
+        // 等待渲染完成
+        await renderAwait(200);
+
+        // 使用原始图片渲染画布
+        await this.renderByImg(this.originImgData.url, this.originImgData.width, this.originImgData.height);
+
+        // 初始化阶段转化原始拖地址为本地地址，同时生成图片base64数据用于h5生成file
+        // 初始化转化图片再某些摄像头截取的网络图片可能渲染空白，暂时废弃
+        if (initConvert) {
+            try {
+                console.log("初始化转化图片");
+                // 等待渲染完成
+                await renderAwait(100);
+                const res = await this.canvasToImgUrl();
+                this.originImgData.url = res.url;
+                this.originImgData.tempFilePath = res.tempFilePath;
+                this.updateImgUrlCb && this.updateImgUrlCb(this.originImgData.url);
+                // 等待渲染完成
+                await renderAwait(50);
+            } catch (error) {
+                console.log(error);
+            }
+        }
+
+        // 设置画笔颜色、填充颜色和画笔粗细
+        this.ctx.strokeStyle = this.defaultColor;
+        this.ctx.setFillStyle(this.defaultFillColor);
+        this.ctx.setLineWidth(this.defaultRough);
+
+
+        this.renderCanvasLoading = false;
+
+          this.renderCanvasLoadingCb && this.renderCanvasLoadingCb(this.renderCanvasLoading)
+
+    }
+
+    // 恢复编辑器状态，可以清除步骤和编辑记录
+     recovery(isClearStep = false, isClearRecord = false) {
+        // 使用原始图片重新渲染画布
+        this.renderByImg(
+            this.originImgData.url,
+            this.originImgData.width,
+            this.originImgData.height
+        );
+
+        // 如果需要清除步骤
+        if (isClearStep) {
+            // 将当前步骤设置为-1
+            this.curStep = -1;
+
+            // 调用更新步骤的回调函数
+            this.updateStepCb && this.updateStepCb(this.curStep);
+        }
+
+        // 如果需要清除编辑记录
+        if (isClearRecord) {
+          clearUrlBlobCache( this.editRecordData.map(item => item.imgData.url))
+            // 清空编辑记录数据
+            this.editRecordData = [];
+
+            
+
+            // 调用更新编辑记录数据的回调函数
+            this.updateEditRecordDataCb &&
+                this.updateEditRecordDataCb(this.editRecordData);
+        }
+    }
+
+    // 根据图片渲染画布
+    renderByImg(
+        url = this.originImgData.url,
+        width = this.width,
+        height = this.height
+    ) {
+        // 清除画布上的所有内容
+        this.ctx.clearRect(0, 0, this.width, this.height);
+
+        // 设置新的画布宽度和高度
+        this.width = width;
+
+        this.height = height;
+
+        // 在画布上绘制图片
+        this.ctx.drawImage(url, 0, 0, width, height);
+
+        // 如果存在渲染图片完成的回调函数，则调用它
+        this.renderImgCb && this.renderImgCb(width, height);
+
+        // 调用更新图片的回调函数
+        this.updateImgUrlCb && this.updateImgUrlCb(url);
+
+        // 将更改绘制到画布上
+        return this.draw();
+    }
+
+    // 清除所有编辑和步骤，恢复到初始状态
+    clear() {
+        // 调用recovery方法，清除步骤和编辑记录
+        this.recovery(true, true);
+    }
+
+    // 撤销操作，回到上一步
+    repeal() {
+        // 如果当前步骤小于0或没有编辑记录数据，则直接返回
+        if (this.curStep < 0 || !this.editRecordData.length) {
+            return;
+        }
+
+        // 如果当前步骤为0，则清除所有编辑，恢复到原始状态,重置步骤
+        if (this.curStep === 0) {
+            this.recovery(true);
+
+            return;
+        }
+
+        // 如果当前步骤大于0，则回退到上一步
+        if (this.curStep > 0) {
+            this.curStep--; // 减少步骤
+            this.updateStepCb && this.updateStepCb(this.curStep); // 更新步骤的回调函数
+
+            this.restoreRecord(); // 恢复上一步的记录（该方法未在提供的代码中定义）
+        }
+    }
+
+    // 重做操作，前进到下一步
+    redo() {
+        // 如果没有编辑记录数据或已经处于最后一步，则直接返回
+        if (
+            !this.editRecordData.length ||
+            this.curStep === this.editRecordData.length - 1
+        ) {
+            return;
+        }
+
+        this.curStep++; // 增加步骤
+        this.updateStepCb && this.updateStepCb(this.curStep); // 更新步骤的回调函数
+
+        this.restoreRecord(); // 恢复下一步的记录（该方法未在提供的代码中定义）
+    }
+
+    // 处理编辑开始
+    handleEditStart(data) {
+        // 标记当前处于编辑状态
+        this.editting = true;
+
+        // 从传入的data对象中解构多个属性，并为未提供的属性提供默认值
+        const {
+            type, // 编辑类型
+            x, // x坐标
+            y, // y坐标
+            color = this.defaultColor, // 颜色，默认为defaultColor
+            fillColor = this.defaultFillColor, // 填充颜色，默认为defaultFillColor
+            rough = this.defaultRough, // 粗糙度，默认为defaultRough
+            shape, // 形状
+            size = this.defaultFontSize, // 字体大小，默认为defaultFontSize
+            align, // 对齐方式
+            baseline, // 基线位置
+            lineHeight = this.defaultFontSize, // 行高，默认为defaultFontSize
+            maxWidth, // 最大宽度
+            renderType = IMG_EDITOR_RENDER_TYPE.img, // 渲染类型，默认为图片渲染
+        } = data;
+
+        // 1.生成此次编辑相关的数据
+        // 创建一个空对象用于存储编辑记录
+        let record = {};
+
+        // 根据编辑类型设置不同的编辑记录
+        switch (type) {
+            case IMG_EDITOR_EDIT_TYPE.graffiti: // 涂鸦编辑
+                // 涂鸦的起始点为一个包含x和y的对象数组
+                const points = [
+                    {
+                        x,
+                        y,
+                    },
+                ];
+                // 设置涂鸦的编辑记录
+                record = {
+                    type,
+                    color,
+                    fillColor,
+                    rough,
+                    shape,
+                    points,
+                    imgData: {
+                        url: "", // 图片（可能后续添加）
+                        width: "", // 图片宽度（可能后续添加）
+                        height: "", // 图片高度（可能后续添加）
+                    },
+
+                    renderType,
+                };
+                break;
+
+            case IMG_EDITOR_EDIT_TYPE.text: // 文本编辑
+                // 设置文本的编辑记录
+                record = {
+                    type,
+                    color,
+                    size,
+                    lineHeight,
+                    x: "", // x坐标可能后续更新
+                    y: "", // y坐标可能后续更新
+                    maxWidth,
+                    baseline,
+                    align,
+                    imgData: {
+                        url: "", // 图片（可能后续添加）
+                        width: "", // 图片宽度（可能后续添加）
+                        height: "", // 图片高度（可能后续添加）
+                    },
+                    renderType,
+                };
+                break;
+
+            case IMG_EDITOR_EDIT_TYPE.cut: // 剪切编辑
+                // 设置剪切的编辑记录（通常不包含其他属性）
+                record = {
+                    type,
+                    imgData: {
+                        url: "", // 图片（可能后续添加）
+                        width: "", // 图片宽度（可能后续添加）
+                        height: "", // 图片高度（可能后续添加）
+                    },
+                    renderType,
+                };
+                break;
+
+            default:
+                // 默认情况，不设置任何记录
+                break;
+        }
+
+    record.id = uniqueId()
+
+        // 2.删除之前的撤销记录并把新纪录添加进去
+
+        // 能取消的操作，如文本、涂鸦，开始时不删除撤销的步骤吗，确认后再删除对应的步骤
+
+        // 检查操作类型是否不是可取消的编辑类型
+        if (!CAN_CANCEL_EDIT_TYPE.includes(type)) {
+            // 如果撤销过再编辑，则删除撤销记录
+            const isRepeal = this.editRecordData.length - 1 !== this.curStep;
+            // 如果撤销过再编辑，则删除撤销记录
+            if (isRepeal) {
+                // 使用 filter 方法删除 editRecordData 中当前步骤（curStep）之后的所有记录
+                this.editRecordData = this.editRecordData.filter(
+                    (_, index) => index <= this.curStep
+                );
+
+                // 如果存在 updateEditRecordDataCb 回调函数，则调用它来更新编辑记录数据
+                this.updateEditRecordDataCb &&
+                    this.updateEditRecordDataCb(this.editRecordData);
+
+                // h5环境canvas生成是base64，转化成url后，删除时清除对应的blob缓存
+
+                // #ifdef H5
+                const deleteImgs = this.editRecordData
+                    .filter((_, index) => index > this.curStep && item.imgData?.url)
+                    .map((item) => item.imgData.url);
+                clearUrlBlobCache(deleteImgs);
+                // #endif
+            }
+
+            // 将新的记录（record）添加到编辑记录数据的末尾
+            this.editRecordData.push(record);
+
+            // 如果存在 updateEditRecordDataCb 回调函数，则调用它来更新编辑记录数据
+            this.updateEditRecordDataCb &&
+                this.updateEditRecordDataCb(this.editRecordData);
+
+            // 增加当前步骤（curStep）的值
+            this.curStep++;
+
+            // 如果存在 updateStepCb 回调函数，则调用它来更新当前步骤
+            this.updateStepCb && this.updateStepCb(this.curStep);
+        } else {
+            // 如果是裁剪（cut）操作
+            // 因为裁剪操作存在取消的场景，所以如果确认裁剪则删除之前撤销记录
+            this.curStep++;
+
+            // 如果存在 updateStepCb 回调函数，则调用它来更新当前步骤
+            this.updateStepCb && this.updateStepCb(this.curStep);
+
+            // 在当前步骤（curStep）的位置插入新的记录（record）
+            this.editRecordData.splice(this.curStep, 0, record);
+
+            // 如果存在 updateEditRecordDataCb 回调函数，则调用它来更新编辑记录数据
+            this.updateEditRecordDataCb &&
+                this.updateEditRecordDataCb(this.editRecordData);
+        }
+    }
+
+    // 处理编辑中
+    // 主要用于展示某些实时的效果，如涂鸦
+    handleEditting(data) {
+        // 如果当前不在编辑状态，则直接返回
+        if (!this.editting) {
+            return;
+        }
+
+        // 获取当前步骤的编辑记录数据
+        const curData = this.editRecordData[this.curStep];
+
+        // 如果当前步骤的编辑记录数据类型是涂鸦（graffiti）
+        if (curData.type === IMG_EDITOR_EDIT_TYPE.graffiti) {
+            // 执行涂鸦操作，传入合并了当前步骤数据和传入数据的对象
+            this.doGraffitiOperation({ ...curData, ...data });
+        }
+    }
+
+    // 更新编辑数据的方法
+    updateEditData(data, step = this.curStep) {
+        // 获取指定步骤的编辑记录数据
+        let targetData = this.editRecordData[step];
+
+        // 如果不存在指定步骤的编辑记录数据，则直接返回
+        if (!targetData) {
+            return;
+        }
+
+        // 使用 Object.assign 方法合并传入的数据到指定步骤的编辑记录数据中
+        Object.assign(targetData, data);
+
+        // 返回更新后的编辑记录数据
+        return targetData;
+    }
+
+    // 将 canvas 转换为图片 URL 的方法
+    canvasToImgUrl(
+        width = this.width, // 默认宽度为当前组件的宽度
+        height = this.height, // 默认高度为当前组件的高度
+        quality = 1, // 默认图片质量为 1（最高质量）
+        fileType = "jpg" // 默认图片格式为 jpg
+    ) {
+        // 返回一个 Promise 对象，用于处理异步操作
+        return new Promise((resolve, reject) => {
+            // 调用 uni.canvasToTempFilePath 方法将 canvas 转换为临时文件路径
+            uni.canvasToTempFilePath({
+                canvasId: this.canvasId, // canvas 的 ID
+                x: 0, // 裁剪区域的左上角横坐标
+                y: 0, // 裁剪区域的左上角纵坐标
+                width: width, // 裁剪区域的宽度
+                height: height, // 裁剪区域的高度
+                quality: quality, // 图片的质量
+                fileType: fileType, // 图片的格式
+                success: async (res) => {
+                    let { tempFilePath } = res; // 提取临时文件路径
+
+                    // 如果是 H5 环境，则将临时文件路径转换为 base64 格式的 URL
+
+                    let url = tempFilePath;
+
+                    // #ifdef H5
+                    url = base64ToUrl(tempFilePath);
+                    // #endif
+
+                    // 解析结果并返回，根据编译环境可能包含或不包含 tempFilePath
+                    resolve({
+                        ...res, // 解析结果包含的其他属性
+                        url,
+                    });
+                },
+                fail: (err) => {
+                    // 如果转换失败，则拒绝 Promise 并返回错误
+                    reject(err);
+                },
+            });
+        });
+    }
+
+    // 删除编辑记录的方法
+    deleteEditRecord(index) {
+        // 使用数组的splice方法删除指定索引的编辑记录项
+        // 第一个参数是索引，第二个参数是要删除的项数（这里是1）
+        this.editRecordData.splice(index, 1);
+
+        // 如果定义了updateEditRecordDataCb回调函数
+        // 则调用该回调函数，并传入更新后的editRecordData数组
+        this.updateEditRecordDataCb &&
+            this.updateEditRecordDataCb(this.editRecordData);
+    }
+
+    // 处理编辑失败的方法
+    handleEditFail(data) {
+        const step = this.curStep;
+
+        // 撤销此次编辑
+        this.repeal();
+
+        const deleteUrl = this.editRecordData[step].imgData.url
+
+        deleteUrl && clearUrlBlobCache([deleteUrl])
+
+        // 先删除当前步骤的编辑记录
+        this.deleteEditRecord(step);
+    }
+
+    // 处理编辑成功的
+    async handleEditFinish(data) {
+
+        this.renderCanvasLoading = true;
+
+        this.renderCanvasLoadingCb && this.renderCanvasLoadingCb(this.renderCanvasLoading)
+        // 从传入的数据中解构出 img 属性
+        const { imgData } = data;
+
+        // 获取当前步骤的编辑记录数据
+        const curData = this.editRecordData[this.curStep];
+
+        // 从当前步骤的编辑记录数据中解构出 renderType, type, 和 shape 属性
+        const { renderType, type, shape } = curData;
+
+        // 设置当前不在编辑状态
+        this.editting = false;
+
+        // 1.涂鸦为直线、圆、正方形时，重新渲染之前的编辑记录和当前编辑记录
+
+        // 目前涂鸦形状不为曲线时，如直线、圆、正方形，实时交互效果为不保留之前涂鸦的轨迹，所以需要清除画布上下文
+        // 因为这些操作会清除画布所有内容，为了让视觉效果还有之前编辑的记录，把之前编辑的记录生成一张图片展示在画布的背景图
+        // 当执行这些操作时，清除画布上下文，当前画布为空，但是视觉效果还是之前的编辑记录即背景图
+        // 所以在编辑完成后需要把上一次编辑的记录或记录相关图片重新渲染后再把此次编辑的渲染上去
+
+        // 如果当前渲染类型为图片、编辑类型为涂鸦，且涂鸦形状不是曲线
+        if (
+            renderType === IMG_EDITOR_RENDER_TYPE.img &&
+            type === IMG_EDITOR_EDIT_TYPE.graffiti &&
+            shape !== IMG_EDITOR_GRAFFITI_SHAPE_TYPE.curve
+        ) {
+            // 定义一个变量用于存储上一步的图片数据
+            let preImgData;
+            // 如果当前步骤是第一步，则使用原始图片作为上一步的图片数据
+            if (this.curStep === 0) {
+                preImgData = this.originImgData;
+                // 如果当前步骤不是第一步，则从上一步的编辑记录数据中获取图片数据
+            } else if (this.curStep > 0) {
+                preImgData = this.editRecordData[this.curStep - 1]?.imgData;
+            }
+
+            // 如果上一步的图片数据存在，则使用它重新渲染图片
+            preImgData && await this.renderByImg(preImgData.url, preImgData.width, preImgData.height);
+
+            // 等待一段时间后继续执行后续操作，这里可能是为了确保图片渲染完成
+            await renderAwait(200);
+
+            // 把这次编辑的记录渲染上去，保留之前渲染上下文
+            // 执行涂鸦操作，并传入当前步骤的编辑记录数据，同时设置 isReserve 为 true
+           await this.doGraffitiOperation({
+                ...curData,
+                isReserve: true,
+            });
+        }
+
+        // 2.渲染文本编辑到画布上
+
+        // 如果编辑类型为文本
+        if (type === IMG_EDITOR_EDIT_TYPE.text) {
+            // 从传入的数据中解构出文本相关的属性
+            const textData = pick(data, [
+                "x",
+                "y",
+                "text",
+                "color",
+                "align",
+                "baseline",
+                "size",
+                "maxWidth",
+                "lineHeight",
+            ]);
+
+            // 更新当前步骤的编辑记录数据
+            this.updateEditData(textData);
+
+            // 把当前文本画到画布上
+            await this.drawText(curData);
+        }
+
+        // 3.裁剪时清除的之前撤销记录
+
+        // 是否撤销过
+        const isRepeal = this.curStep !== this.editRecordData.length - 1;
+
+        // 因为裁剪操作存在取消的场景，所以如果确认裁剪则删除之前撤销记录
+        // 如果编辑类型为裁剪，且撤销过
+        if (CAN_CANCEL_EDIT_TYPE.includes(type) && isRepeal) {
+            // 过滤编辑记录数据，只保留到当前步骤为止的数据
+            this.editRecordData = this.editRecordData.filter(
+                (_, index) => index <= this.curStep
+            );
+
+            // 如果定义了 updateEditRecordDataCb 回调函数，则调用它并传入更新后的编辑记录数据
+            this.updateEditRecordDataCb &&
+                this.updateEditRecordDataCb(this.editRecordData);
+
+            // 如果是 H5 环境，则清理超过当前步骤的图片资源缓存
+
+            // #ifdef H5
+            const deleteImgs = this.editRecordData
+                .filter((_, index) => index > this.curStep && item.imgData?.url)
+                .map((item) => item.imgData?.url);
+            clearUrlBlobCache(deleteImgs);
+            // #endif
+        }
+
+        // 如果渲染类型不是图片类型，则直接返回
+        if (renderType !== IMG_EDITOR_RENDER_TYPE.img) {
+            
+        this.renderCanvasLoading = true;
+
+        this.renderCanvasLoadingCb && this.renderCanvasLoadingCb(this.renderCanvasLoading)
+            return;
+        }
+
+        // 等待一段时间后继续执行后续操作，这里可能是为了确保图片渲染完成
+          await renderAwait(200)
+
+        // 如果传入了已经渲染好的图片地址则直接渲染并添加到记录，目前裁剪场景是传入直接渲染好的图片
+        if (imgData?.url) {
+            // 从 data 中解构出 img 相关的属性（img, imgWidth, imgHeight）
+            curData.imgData = imgData;
+
+            // 使用解构出的图片数据重新渲染图片
+           await  this.renderByImg(curData.imgData.url, curData.imgData.width, curData.imgData.height);
+        } else {
+            // 如果 data 中没有 img 属性，则尝试将当前 canvas 转换为图片 URL
+            try {
+                // 调用 canvasToImgUrl 方法，并等待其异步完成
+                const res = await this.canvasToImgUrl();
+
+                // 更新当前步骤的编辑记录数据，使用生成的图片 URL 和画布尺寸
+                curData.imgData = {
+                    ...res,
+                    width: this.width,
+                    height: this.height,
+                };
+
+                // 如果定义了 updateImgUrlCb 回调函数，则调用它并传入生成的图片 URL
+                this.updateImgUrlCb && this.updateImgUrlCb(res.url);
+            } catch (err) {
+                // 如果在转换 canvas 到图片 URL 的过程中出现错误，则调用 handleEditFail 方法处理
+                this.handleEditFail(err);
+            }
+        }
+
+        // 编辑后校验当前编辑图片是否生成正常，如果不正常则撤回该条记录
+        if (this.editFinishValid) {
+            try {
+                await renderAwait(100);
+                await this.validImage();
+                console.log(`图片生成成功`);
+            } catch (error) {
+                console.log(`图片生成失败:${error},返回上一次编辑状态`);
+                this.handleEditFail(error);
+            }
+        }
+
+        this.renderCanvasLoading = false;
+
+        this.renderCanvasLoadingCb && this.renderCanvasLoadingCb(this.renderCanvasLoading);
+    }
+
+    // 执行涂鸦操作
+    async doGraffitiOperation(data) {
+        // 从data对象中解构出所需的属性
+        const { x, y, points, shape, renderType, isReserve } = data;
+
+        // 判断是否处于编辑状态（即x和y坐标是否已定义）
+        const isEditting = x !== undefined && y !== undefined;
+
+        // 如果处于编辑状态
+        if (isEditting) {
+            // 如果涂鸦的形状是曲线，或者当前只有一个点
+            if (shape == IMG_EDITOR_GRAFFITI_SHAPE_TYPE.curve || points.length == 1) {
+                // 将新的点（包含x和y坐标）添加到points数组中
+                points.push({
+                    x,
+                    y,
+                });
+                // 如果涂鸦不是曲线，并且已经有至少两个点（在此代码逻辑中，我们假设涂鸦至少需要两个点）
+            } else {
+                // 更新points数组中的第二个点（索引为1）的坐标
+                points[1] = {
+                    x,
+                    y,
+                };
+            }
+        }
+
+        switch (shape) {
+            // 直线
+            case IMG_EDITOR_GRAFFITI_SHAPE_TYPE.line:
+               await this.drawLine({
+                    startX: points[0].x,
+                    startY: points[0].y,
+                    x: points[1].x,
+                    y: points[1].y,
+                    ...pick(data, ["rough", "color"]),
+                    isReserve: !!isReserve,
+                });
+                break;
+            // 曲线
+            case IMG_EDITOR_GRAFFITI_SHAPE_TYPE.curve:
+                const len = points.length;
+
+                await  this.drawCurve({
+                    startX: points[len - 2].x,
+                    startY: points[len - 2].y,
+                    x: points[len - 1].x,
+                    y: points[len - 1].y,
+                    ...pick(data, ["rough", "color"]),
+                    isReserve: !!isReserve,
+                });
+
+                // 如果是用图片来渲染，不需要保存每个点位的数据，只保存最后两个点位的数据
+                if (renderType === IMG_EDITOR_RENDER_TYPE.img) {
+                    points.shift();
+                }
+                break;
+            // 空心圆
+            case IMG_EDITOR_GRAFFITI_SHAPE_TYPE.hollowCircle:
+                await this.drawHollwCircle({
+                    startX: points[0].x,
+                    startY: points[0].y,
+                    x: points[1].x,
+                    y: points[1].y,
+                    ...pick(data, ["fillColor", "color", "rough"]),
+                    isReserve: !!isReserve,
+                });
+                break;
+            // 空心正方形
+            case IMG_EDITOR_GRAFFITI_SHAPE_TYPE.hollowRect:
+               await this.drawHollowRect({
+                    startX: points[0].x,
+                    startY: points[0].y,
+                    x: points[1]?.x,
+                    y: points[1]?.y,
+                    ...pick(data, ["fillColor", "color", "rough"]),
+                    isReserve: !!isReserve,
+                });
+                break;
+            // 实心正方形
+            case IMG_EDITOR_GRAFFITI_SHAPE_TYPE.rect:
+                await this.drawRect({
+                    startX: points[0].x,
+                    startY: points[0].y,
+                    x: points[1].x,
+                    y: points[1].y,
+                    ...pick(data, ["fillColor", "color", "rough"]),
+                    isReserve: !!isReserve,
+                });
+                break;
+            // 实心圆
+            case IMG_EDITOR_GRAFFITI_SHAPE_TYPE.circle:
+                await this.drawCircle({
+                    startX: points[0].x,
+                    startY: points[0].y,
+                    x: points[1].x,
+                    y: points[1].y,
+                    ...pick(data, ["fillColor", "color", "rough"]),
+                    isReserve: !!isReserve,
+                });
+                break;
+            default:
+                break;
+        }
+    }
+
+    // 判断图片是否生成正常
+    validImage() {
+        return new Promise((resolve, reject) => {
+            uni.canvasGetImageData({
+                canvasId: this.canvasId,
+                x: 0,
+                y: 0,
+                width: this.width,
+                height: this.height,
+                success: ({ data }) => {
+                   const valid = validImgHasEmpty(
+                       data,
+                       this.width * this.height,
+                       this.maxTransparencyRate
+                   );
+                    valid ? resolve(valid) : reject("图片空白部分过大");
+                },
+                fail: (err) => {
+                    reject(err);
+                },
+            });
+        });
+    }
+
+    // restoreRecord 方法用于恢复指定步骤的记录
+  restoreRecord(step = this.curStep) {
+        // 从当前编辑记录数据（this.editRecordData）中获取指定步骤（step）的记录，
+        // 如果没有找到，则使用空对象{}作为默认值
+        const { imgData, renderType } = this.editRecordData[step] || {};
+
+        // 过滤出所有步骤小于或等于给定步骤的记录，存入renderRecords数组
+        const renderRecords = this.editRecordData.filter(
+            (_, index) => index <= step
+        );
+
+        // 如果当前记录的渲染类型是图片（IMG_EDITOR_RENDER_TYPE.img），并且图片存在（img）
+        if (renderType === IMG_EDITOR_RENDER_TYPE.img && imgData?.url) {
+            // 调用renderByImg方法渲染图片
+          this.renderByImg(imgData.url, imgData.width, imgData.height);
+        }
+        // 如果当前记录的渲染类型是数据（IMG_EDITOR_RENDER_TYPE.data）
+        else if (renderType === IMG_EDITOR_RENDER_TYPE.data) {
+            // 查找renderRecords数组中最后一个类型为图片并且图片存在的记录的索引
+            // 因为使用图片渲染的包含它之前所有编辑记录的修改，所以不需要渲染它之前的步骤的修改
+            const lastImgRenderIndex = findLastIndex(
+                renderRecords,
+                (item) =>
+          item.renderType === IMG_EDITOR_RENDER_TYPE.img && item.imgData?.url
+            );
+
+            // 如果找到了这样的记录
+            if (lastImgRenderIndex !== -1) {
+                // 过滤出从最后一个图片记录开始的所有记录，存入renderRecords数组
+                renderRecords = renderRecords.filter(
+                    (_, index) => index >= lastImgRenderIndex
+                );
+            }
+
+            // 遍历过滤后的记录，调用rerender方法重新渲染每一条记录
+            for (const curData of renderRecords) {
+                this.rerender(curData);
+            }
+        }
+    }
+
+    // 重新渲染
+    rerender(data) {
+        if (data.renderType === IMG_EDITOR_RENDER_TYPE.img && data.imgData?.url) {
+            this.renderByImg(
+                data.imgData.url,
+                data.imgData.width,
+                data.imgData.height
+            );
+        } else if (renderType === IMG_EDITOR_RENDER_TYPE.data) {
+            this.renderByData(data);
+        }
+    }
+
+    /**
+     * 根据传入的数据渲染不同的内容或执行不同的操作
+     *
+     * @param {Object} data - 包含渲染或操作所需信息的对象
+     */
+    renderByData(data) {
+        this.recovery();
+
+        // 从传入的 data 对象中解构出 type 和 shape 属性
+        const { type, shape } = data;
+
+        // 根据 type 属性的值执行不同的操作
+        switch (type) {
+            // 如果 type 是 "graffiti"（涂鸦）
+            case IMG_EDITOR_EDIT_TYPE.graffiti:
+                // 如果 shape 是 "curve"（曲线）
+                if (shape === IMG_EDITOR_GRAFFITI_SHAPE_TYPE.curve) {
+                    // 调用 drawCurveOnce 方法来绘制一次曲线，并传入 data 作为参数
+                    this.drawCurveOnce(data);
+                } else {
+                    // 如果 shape 不是 "curve"，则执行一般的涂鸦操作
+                    // 调用 doGraffitiOperation 方法，并传入 data 作为参数
+                    this.doGraffitiOperation(data);
+                }
+                break;
+
+            // 如果 type 是 "text"（文本）
+            case IMG_EDITOR_EDIT_TYPE.text:
+                // 调用 drawText 方法来绘制文本，并传入 data 作为参数
+                this.drawText(data);
+                break;
+
+            // 如果 type 不匹配上述任何一种情况
+            default:
+                // 不执行任何操作，直接跳出 switch 语句
+                break;
+        }
+    }
+
+    /**
+     * 在绘图上下文中绘制文本
+     *
+     * @param {Object} [opts={}] - 绘制文本的配置选项
+     * @param {string} [opts.text] - 要绘制的文本
+     * @param {number} [opts.x] - 文本开始的 x 坐标
+     * @param {number} [opts.y] - 文本开始的 y 坐标
+     * @param {number} [opts.maxWidth] - 文本允许的最大宽度（用于换行）
+     * @param {string} [opts.color=this.defaultColor] - 文本颜色
+     * @param {number} [opts.size=this.defaultFontSize] - 文本字体大小
+     * @param {string} [opts.align] - 文本对齐方式
+     * @param {string} [opts.baseline="top"] - 文本基线对齐方式
+     * @param {number} [opts.lineHeight=this.defaultFontSize] - 行高
+     */
+    drawText(opts = {}) {
+        // 解构赋值，从 opts 对象中获取配置选项，并设置默认值
+        const {
+            text,
+            x,
+            y,
+            maxWidth,
+            color = this.defaultColor,
+            size = this.defaultFontSize,
+            align,
+            baseline = "top",
+            lineHeight = this.defaultFontSize,
+        } = opts;
+
+        // 设置字体大小
+        this.ctx.setFontSize(size);
+
+        // 设置文本颜色
+        this.ctx.setFillStyle(color);
+
+        // 如果 baseline 存在，则设置文本基线对齐方式
+        baseline && this.ctx.setTextBaseline(baseline);
+
+        // 如果 align 存在，则设置文本对齐方式
+        align && this.ctx.setTextAlign(align);
+
+        // 将文本分割成字符数组
+        let chars = text.split("");
+        let currentLine = ""; // 当前行存储的字符
+        let currentLineWidth = 0; // 当前行的宽度
+
+        let _y = y; // 当前绘制位置的 y 坐标
+
+        // 遍历字符数组
+        for (let i = 0; i < chars.length; i++) {
+            // 测量单个字符的宽度
+            let charMetrics = this.ctx.measureText(chars[i]);
+            let charWidth = charMetrics.width;
+
+            // 尝试将字符添加到当前行
+      if (currentLineWidth + charWidth <= maxWidth && chars[i] !== '\n') {
+                currentLine += chars[i]; // 将字符添加到当前行
+                currentLineWidth += charWidth; // 更新当前行宽度
+            } else {
+                // 如果当前行超出最大宽度，则绘制当前行并开始新行
+                this.ctx.fillText(currentLine, x, _y); // 绘制当前行
+
+                _y += lineHeight; // 将 y 坐标移动到下一行的起始位置
+                currentLine = chars[i]; // 新行开始只有这一个字符
+                currentLineWidth = charWidth; // 更新当前行宽度
+            }
+
+            // 填入最后一行的文字，用于未超出最大宽度的行的情况
+            if (i === chars.length - 1 && currentLine) {
+                this.ctx.fillText(currentLine, x, _y);
+            }
+        }
+
+        return this.draw(true);
+    }
+
+    // 绘制直线的方法
+    drawLine(opts) {
+        const {
+            startX, // 直线起点的 x 坐标
+            startY, // 直线起点的 y 坐标
+            x, // 直线终点的 x 坐标
+            y, // 直线终点的 y 坐标
+            isReserve = false, // 是否保留（可能是绘制到某个缓冲区或离屏渲染）
+            rough = this.defaultRough, // 线条的“粗糙度”或宽度，默认为某个默认值
+            color = this.defaultColor, // 线条颜色，默认为某个默认值
+            isCurve = false, // 是否是曲线，默认为 false
+        } = opts;
+
+        if (isCurve) {
+            // 设置画笔的端点样式为圆形
+            this.ctx.setLineCap("round");
+
+            // 设置画笔线段连接处样式为圆形
+            this.ctx.setLineJoin("round");
+        } else {
+
+            // 设置画笔的端点样式为正方形
+            this.ctx.setLineCap("square");
+
+            // 设置画笔线段连接处样式为斜接
+            this.ctx.setLineJoin("miter");
+
+            this.ctx.beginPath();
+
+
+        }
+
+        // 设置起点
+        this.ctx.moveTo(startX, startY);
+        // 设置线条宽度
+        this.ctx.setLineWidth(rough);
+        // 设置线条颜色
+        this.ctx.setStrokeStyle(color);
+
+        // 绘制直线到指定点
+        this.ctx.lineTo(x, y);
+        // 描边路径，即绘制线条
+        this.ctx.stroke();
+
+        return this.draw(isReserve);
+    }
+
+    // 绘制曲线的方法（但这里只是简单地使用 drawLine 绘制了一系列直线段）
+    drawCurve(opts) {
+        return this.drawLine({ ...opts, isReserve: true, isCurve: true }); // 调用 drawLine 方法并设置 isReserve 为 true
+    }
+
+    // 一次性绘制完整的曲线
+    drawCurveOnce(data) {
+        const { points } = data;
+
+        points.forEach((_, index) => {
+            if (index < points.length - 1) {
+                // 遍历除最后一个点之外的所有点
+                this.drawCurve({
+                    startX: points[index].x,
+                    startY: points[index].y,
+                    x: points[index + 1].x,
+                    y: points[index + 1].y,
+                    ...pick(data, ["rough", "color"]),
+                });
+            }
+        });
+    }
+
+    // 异步绘制的方法（使用 setTimeout 模拟异步）
+    drawAsync(isReserve = true, cb = () => {}) {
+        setTimeout(() => {
+            this.ctx.draw(isReserve, cb); // 调用自定义的 draw 方法（可能是异步的）并在完成后调用回调函数 cb
+        }, 200); // 延迟 200 毫秒执行
+    }
+
+    // 绘制空心矩形的方法
+    drawHollowRect(opts) {
+        return this.drawRect({ ...opts, isHollow: true });
+    }
+
+    // 绘制矩形的方法
+     drawRect(opts) {
+        const {
+            startX, // 矩形左上角的 x 坐标
+            startY, // 矩形左上角的 y 坐标
+            x, // 矩形右下角的 x 坐标
+            y, // 矩形右下角的 y 坐标
+            isHollow = false, // 是否绘制空心矩形
+            fillColor = this.defaultFillColor, // 填充颜色
+            color = this.defaultColor, // 线条颜色
+            rough = this.defaultRough, // 线条宽度或“粗糙度”
+            isReserve = false, // 是否保留
+        } = opts;
+
+        // 计算矩形的宽度和高度
+        let width = Math.abs(x - startX);
+        let height = Math.abs(y - startY);
+
+        // 设置画笔的端点样式为正方形
+        this.ctx.setLineCap("square");
+
+        // 设置画笔线段连接处样式为斜接
+        this.ctx.setLineJoin("miter");
+
+        // 开始一个新的路径
+        this.ctx.beginPath();
+        // 绘制矩形
+        this.ctx.rect(startX, startY, width, height);
+
+        // 如果不是空心矩形，则填充矩形
+        if (!isHollow) {
+            this.ctx.setFillStyle(fillColor);
+            this.ctx.fill();
+        }
+
+        // 设置线条宽度
+        this.ctx.setLineWidth(rough);
+        // 设置线条颜色
+        this.ctx.setStrokeStyle(color);
+        // 描边矩形
+        this.ctx.stroke();
+
+        return this.draw(isReserve);
+    }
+
+    // 绘制空心圆的方法
+    drawHollwCircle(opts) {
+       return this.drawCircle({ ...opts, isHollow: true });
+    }
+
+    draw(isReserve = false) {
+        return new Promise((resolve) => {
+            this.ctx.draw(isReserve, () => {
+                resolve();
+            });
+        });
+    }
+
+    // 绘制圆形的方法
+    drawCircle(opts) {
+        const {
+            startX, // 圆的左上角或起始点的 x 坐标
+            startY, // 圆的左上角或起始点的 y 坐标
+            x, // 圆的右下角或终止点的 x 坐标
+            y, // 圆的右下角或终止点的 y 坐标
+            isHollow = false, // 是否绘制空心圆
+            fillColor = this.defaultFillColor, // 填充颜色
+            color = this.defaultColor, // 线条颜色
+            isReserve = false, // 是否保留
+            rough = this.defaultRough, // 线条宽度或“粗糙度”
+        } = opts;
+
+        // 计算圆心和半径
+        let pointLT = {}; // 左上角点
+        let pointRB = {}; // 右下角点
+        let center = {}; // 圆心
+
+        // 左上坐标，
+        pointLT.X = Math.min(startX, x);
+        pointLT.Y = Math.min(startY, y);
+
+        // 右下坐标
+        pointRB.X = Math.max(startX, x);
+        pointRB.Y = Math.max(startY, y);
+
+        // 圆中心点坐标
+        center.X = (pointRB.X + pointLT.X) / 2;
+        center.Y = (pointRB.Y + pointLT.Y) / 2;
+
+        let dx = pointRB.X - pointLT.X;
+        let dy = pointRB.Y - pointLT.Y;
+
+        // 计算圆半径  根据勾股定理
+        let r = Math.sqrt(dx * dx + dy * dy) / 2; // 计算半径
+
+        // 设置画笔的端点样式为正方形
+        this.ctx.setLineCap("square");
+
+        // 设置画笔线段连接处样式为斜接
+        this.ctx.setLineJoin("miter");
+        // 开始一个新的路径
+        this.ctx.beginPath();
+        // 绘制圆形
+        this.ctx.arc(center.X, center.Y, r, 0, 2 * Math.PI);
+
+        // 设置线条宽度
+        this.ctx.setLineWidth(rough);
+
+        // 如果不是空心圆，则填充圆形
+        if (!isHollow) {
+            this.ctx.setFillStyle(fillColor);
+            this.ctx.fill();
+        }
+
+        // 设置线条颜色
+        this.ctx.setStrokeStyle(color);
+        // 描边圆形
+        this.ctx.stroke();
+
+        return this.draw(isReserve);
+    }
+}