如何裁剪canvas.toDataURL [英] How to crop canvas.toDataURL

问题描述

，您好，

我想在服务器上发送之前裁剪 canvas.toDataURL（）我没有找到如何（

这是我的代码：

  TakePhoto：function（）{
 var myCanvas = document.getElementById（'game'）; 
 var dataURL = myCanvas.toDataURL（）; 
 // crop the dataURL 
} 
  

因此，如何裁剪dataURL ？


提前感谢

解决方案

toDataURL 方法将总是捕获整个画布。

因此，要捕获裁剪的部分，您必须创建一个临时画布，并将其大小设置为与裁剪相同。 / p>

然后使用 drawImage 的扩展形式裁剪原始图像并将其绘制到临时画布上。 p>

示例代码和演示：

  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）{//创建一个尺寸为裁剪大小的临时画布var canvas1 = document.createElement（'canvas'）; var ctx1 = canvas1.getContext（'2d'）; canvas1.width = cropWidth; canvas1.height = cropHeight; //使用drawImage的扩展将裁剪区域绘制到临时画布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>原始图片< / h4& ; img src ='https：//dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg'>< h4>裁剪后的图像从裁剪生成.toDataURL< / h4>  

Hello,
I want to crop my canvas.toDataURL() before sending it on the server, but I didn't find how :(
Here's my code :

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

So, how to crop the dataURL ?
Can anyone help me ?
Thanks in advance

解决方案

The toDataURL method will always capture the whole canvas.

So to capture a cropped portion you will have to create a temporary canvas and size it to the same size as the crop.

Then use the extended form of drawImage to both crop the original image and draw it onto the temporary canvas.

Example code and a Demo:

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>

这篇关于如何裁剪canvas.toDataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！