canvas裁剪图片的一个问题

Question

想在一张很大的图片中间裁剪出一小块，虽然可以裁剪成功，但是旁边的透明区域、画布大小依然是最初的大小，怎样能保存裁剪出来的那一小块呢？

clipComfirm() { //开始剪切

    let imgData;

    let canvas = document.getElementById('cvsClip');

    let cvs = canvas.getContext('2d');

    let img = new Image();

    img.onload = () =>{

        cvs.rect(100,200,1024,600); //rect(x,y,width,height)

        cvs.clip();

        cvs.drawImage(img,0,0,canvas.width,canvas.height); //drawImage(image, x, y, width, height)

        imgData = canvas.toDataURL('image/png');

    };

    img.src = this.currentImg.img;

}

如上图，裁剪出来后四周包围着透明区域，整体大小是原画布的大小，如何能不保存透明区域，只要中间的一小块

Answer 1

canvas.toDataURL('image/png')是对整个画布的，试试 getImageData 能不能解决