cut-image-upload/getCutImg/getCutImg.js

裁剪图片，自定义裁剪比例，矩形，圆形，不支持椭圆形

//获取生成的裁剪图片,base64
const getCutImg = async (domId) => {
  let canvas = document.getElementById(`${domId}Canvas`);
  if (canvas) {
    if (document.getElementById(`${domId}ContentFile`).value) {
      let obj = window["cutCoordinate" + domId];
      let clipX = obj.clipX;
      let clipY = obj.clipY;
      let cutWidth = obj.cutWidth;
      let cutHeight = obj.cutHeight;
      let cutType = obj.cutType;
      let context = canvas.getContext("2d");
      let imgData = context.getImageData(clipX, clipY, cutWidth, cutHeight);

      let canvas2 = document.createElement("canvas");
      canvas2.width = cutWidth;
      canvas2.height = cutHeight;
      let ctx = canvas2.getContext("2d");
      ctx.putImageData(imgData, 0, 0);
      let base64 = canvas2.toDataURL();
      if (cutType === "circle") {
        await new Promise((resolve, reject) => {
          let canvas3 = document.createElement("canvas");
          canvas3.width = cutWidth;
          canvas3.height = cutHeight;
          let context3 = canvas3.getContext("2d");
          let img = document.createElement("img");
          img.src = base64;
          img.onload = function () {
            // context3.globalCompositeOperation = "source-in"; // "destination-in"; //"source-in";
            context3.beginPath();
            context3.arc(
              canvas3.width / 2,
              canvas3.height / 2,
              canvas3.width / 2,
              0,
              Math.PI * 2
            );
            context3.clip();

            context3.drawImage(this, 0, 0, canvas3.width, canvas3.height);
            base64 = canvas3.toDataURL();
            resolve(base64);
          };
        });
        return base64;
      } else {
        return base64;
      }
    } else {
      return null;
    }
  }
  return false;
};
export default getCutImg;