在React上用canvas实现图片的截取和旋转

这里的截取没使用canvas而是用了cropperjs

这里只展示js部分

首先这里先说明一下，canvas的rotate和translate的函数实际上只是在修改画布的坐标系的位置和指向，实际可显示的区域：即画布 是不会随着坐标轴的改变而改变的。

实现图片旋转代码

const imgRotate = ()=>{
    const pic = document.getElementById("pic");
    const canvas = document.createElement("canvas");

    var width = imageDimensions.width;
    var height = imageDimensions.height;
    console.log(`imagedimensions width: ${width} height: ${height}`);
    const ctx = canvas.getContext("2d");

    canvas.width = height;
    canvas.height = width;

    ctx.translate(canvas.width * 0.5, canvas.height * 0.5);
    ctx.rotate( 0.5 * Math.PI);
    ctx.drawImage(pic, - canvas.height / 2, - canvas.width / 2, canvas.height, canvas.width);

    var imgurl = canvas.toDataURL('image/png');

  }

实现图片截取部分

const imgCrop = ()=>{
    const picDoc = document.getElementById('pic');
    const cropper = new Cropper(picDoc,{
      autoCrop: false,
      viewMode: 1,
      aspectRatio: 4/3,
      dragMode: 'move',
      background: true,
      rotatable:true,
      ready(){
        console.log("im in ready area");
        this.cropper.crop();  
        setMyCropper(this.cropper);
      }
    });

为了更好的展示核心代码，删去了react的state的一些修改，主要笔者本人也不熟悉react，主要是实习的公司要求hhh。