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 能不能解决