测试代码（不需要回答）

Question

createImg(canvasValue) {
      let wholeImg = null;
      // 初始化裁剪框
      function setupCropper() {
        // 创建一个 Cropper 实例
        wholeImg = new Cropper(canvas, {
          autoCrop: true,
          aspectRatio: 9 / 16,
          viewMode: 0.8,
          dragMode: "none",
          initialAspectRatio: 1,
          preview: "",
          background: false,
          autoCropArea: 1,
          zoomOnWheel: true
        });
        // 等待一段时间确保裁剪框初始化完成
        setTimeout(() => {
          // 设置裁剪框默认向左移动
          const cropBoxData = wholeImg.getCropBoxData();
          const offsetX = 300; // 根据需要调整偏移量
          const newCropBoxData = {
            ...cropBoxData,
            left: cropBoxData.left - offsetX,
            right: cropBoxData.right - offsetX
          };
          wholeImg.setCropBoxData(newCropBoxData);
        }, 100);
      }
      // 检查裁剪操作是否完成
      function checkCropCompletion() {
        const cropBoxData = wholeImg.getCropBoxData();
        const imageData = wholeImg.getImageData();
        const isCropComplete =
          cropBoxData.width !== imageData.width ||
          cropBoxData.height !== imageData.height;
        if (isCropComplete) {
          // 裁剪操作已完成，可以获取裁剪后的 Canvas
          const croppedCanvas = wholeImg.getCroppedCanvas();
          croppedCanvas.toBlob(blob => {
            const downloadLink = document.createElement("a");
            downloadLink.href = URL.createObjectURL(blob);
            downloadLink.download = "cropped_image.png";
            downloadLink.click();
          }, "image/png");
        } else {
          // 裁剪操作未完成，继续检查
          setTimeout(checkCropCompletion, 100);
        }
      }
      // 创建一个新的 Canvas 用于裁剪
      const canvas = document.createElement("canvas");
      const canvasDom = canvasValue;
      const container = canvasDom.parentElement;
      const width = canvasDom.offsetWidth;
      const height = canvasDom.offsetHeight;
      const scale = 0.5;
      canvas.width = width * scale;
      canvas.height = height * scale;
      // 设置 html2canvas 的配置项
      const options = {
        backgroundColor: "#fff",
        canvas: canvas,
        useCORS: true,
        scale: scale,
        width: width,
        height: height,
        background: "#fff",
        allowTaint: true
      };
      // 将原始 Canvas 绘制到新的 Canvas 上
      html2canvas(canvasDom, options).then(canvas => {
        const imageContainer = this.$refs.image_container;
        canvas.style.display = "none";
        container.appendChild(canvas);
        setTimeout(() => {
          // 替换原始 Canvas
          canvasDom.replaceChild(canvas, imageContainer);
          canvas.style.display = "block";
          // 初始化裁剪框
          setupCropper();
          // 检查裁剪操作是否完成
          checkCropCompletion();
        }, 0);
      });
    },

Answer 1

好的