Как обрезать canvas.toDataURL

Question

Здравствуйте,
Я хочу, чтобы обрезать мой canvas.toDataURL() перед отправкой его на сервер, но я не нашел, как :(
Вот мой код:

TakePhoto: function() { 
     var myCanvas = document.getElementById('game'); 
     var dataURL = myCanvas.toDataURL(); 
     // crop the dataURL 
    } 

Так, как обрезать dataURL?
Может кто-нибудь мне помочь?
заранее спасибо

Answer 1

Метод toDataURL всегда будет захватывать весь холст.

Чтобы захватить отрезанную часть, вам нужно будет создать временный холст и размер его того же размера, что и урожай.

Затем используйте расширенную форму drawImage, чтобы обрезать исходное изображение и нарисовать его на временном холсте.

Пример кода и демо:

var img=new Image(); 
 
img.crossOrigin='anonymous'; 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg"; 
 
function start(){ 
 
    var croppedURL=cropPlusExport(img,190,127,93,125); 
 
    var cropImg=new Image(); 
 
    cropImg.src=croppedURL; 
 
    document.body.appendChild(cropImg); 
 
} 
 

 
function cropPlusExport(img,cropX,cropY,cropWidth,cropHeight){ 
 
    // create a temporary canvas sized to the cropped size 
 
    var canvas1=document.createElement('canvas'); 
 
    var ctx1=canvas1.getContext('2d'); 
 
    canvas1.width=cropWidth; 
 
    canvas1.height=cropHeight; 
 
    // use the extended from of drawImage to draw the 
 
    // cropped area to the temp canvas 
 
    ctx1.drawImage(img,cropX,cropY,cropWidth,cropHeight,0,0,cropWidth,cropHeight); 
 
    // return the .toDataURL of the temp canvas 
 
    return(canvas1.toDataURL()); 
 
}

body{ background-color: ivory; } 
 
img{border:1px solid red; margin:0 auto; }

<h4>Original image</h4> 
 
<img src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg'> 
 
<h4>Cropped image create from cropping .toDataURL</h4>