Javascript 如何裁剪canvas.toDataURL

你好，
在将画布发送到服务器上之前，我想裁剪画布上的

canvas.toDataURL（）

，但我没有找到方法：（
这是我的代码：

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

那么，如何裁剪数据URL？

---

有人能帮我吗？
提前谢谢

使用

toDataURL

方法将始终捕获整个画布

因此，要捕获裁剪部分，您必须创建一个临时画布，并将其大小调整为与裁剪相同的大小

然后使用扩展的

drawImage

裁剪原始图像并将其绘制到临时画布上

示例代码和演示：

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

var img=newimage（）；
img.crossOrigin='anonymous'；
img.onload=启动；
img.src=”https://i.stack.imgur.com/EUBBt.png";
函数start（）{
var crapedurl=craplusExport（img，190127,93125）；
var cropImg=新图像（）；
cropImg.src=cropedurl；
文件.正文.附件（cropImg）；
}
功能输出（img、cropX、cropY、cropWidth、cropHeight）{
//创建一个临时画布，其大小为裁剪后的大小
var canvas1=document.createElement（'canvas'）；
var ctx1=canvas1.getContext（'2d'）；
画布1.宽度=宽度；
画布1.高度=微光；
//使用drawImage的扩展from来绘制
//临时画布上的裁剪区域
ctx1.绘图图像（img、cropX、cropY、cropWidth、cropHeight、0,0、cropWidth、cropHeight）；
//返回临时画布的.toDataURL
return（canvas1.toDataURL（））；
}

body{背景色：象牙；}
img{边框：1px纯红色；边距：0自动；}

原始图像
从裁剪创建裁剪图像。toDataURL

裁剪的输出具体是什么？谢谢！请注意：当使用数据url（而不是从url加载）填充图像时，您仍然需要使用onload处理程序，因为它不会将图像同步绘制到画布上，如所示