gpt4 book ai didi

javascript - 如何裁剪 canvas.toDataURL

转载 作者:行者123 更新时间:2023-12-03 09:46:42 60 4
gpt4 key购买 nike

你好,
我想裁剪我的 canvas.toDataURL()在将它发送到服务器之前,但我没有找到如何:(
这是我的代码:

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

所以, 如何裁剪 dataURL ?
谁能帮我 ?提前致谢

最佳答案

toDataURL方法将始终捕获整个 Canvas 。
因此,要捕获裁剪的部分,您必须创建一个临时 Canvas 并将其调整为与裁剪相同的大小。
然后使用 drawImage 的扩展形式裁剪原始图像并将其绘制到临时 Canvas 上。
enter image description here
示例代码和演示:

var img=new Image();
img.crossOrigin='anonymous';
img.onload=start;
img.src="/image/EUBBt.png";
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='/image/EUBBt.png'>
<h4>Cropped image create from cropping .toDataURL</h4>

关于javascript - 如何裁剪 canvas.toDataURL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34242155/

60 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com