Html5 canvas 具有乘数的Fabric toDataUrl未按预期工作

在我的代码中，我创建了使用织物形状剪裁图像的方法。我用stackoverflow的答案来实现这一点。不知何故，使用此方法后，我无法使用默认的fabric canvas渲染方法渲染画布

var img01URL='1〕https://www.google.com/images/srpr/logo4w.png';
var img02URL=http://fabricjs.com/lib/pug.jpg';
var canvas=newfabric.canvas（'c'）；
document.getElementById（'download'）.addEventListener（'click'，function（）{
canvas.renderAll（）；
this.href=canvas.toDataURL({
格式：“png”，
乘数：2
});
this.download=“test.png”；
}，假）；
var clipRect1=new fabric.Rect({
原文：“左”，
原创：“top”，
角度：90，
左：195，
排名：0，
宽度：200，
身高：200，
填充：'#DDD'，/*使用透明表示无填充*/
冲程宽度：1，
lockMovementX：对，
洛克·莫文蒂：没错，
角度：5，
笔划：“红色”
});
var pugImg=新图像（）；
pugImg.onload=函数（img）{
var pug=新结构。图像（pugImg{
角度：0，
宽度：500，
身高：500，
左：245，
排名：35，
scaleX:0.3，
斯卡利：0.3，
clipName:“帕格”，
clipTo:函数（ctx）{
ctx.save（）；
setTransform（1,0,0,1,0,0）；
clipRect1.渲染（ctx）；
ctx.restore（）；
}
});
canvas.add（哈巴狗）；
};
pugImg.src=img02URL；
pugImg.setAttribute（'crossOrigin'，'anonymous'）
#c{
边框：0px实心#ccc；
}

作为图像下载
您的问题是乘数。
当使用这种clipTo函数时，您将canvas的transform设置为plain。使用带倍增器的画布进行渲染时，基本画布变换由倍增器缩放

您的rect将在没有此变换的情况下绘制（因为setTransform（1,0,0,1,0,0））并将剪切图像

不应将变换设置为[1,0,0,1,0,0]，而应将其设置为正在剪裁的对象的当前变换的倒数


var img01URL='1〕https://www.google.com/images/srpr/logo4w.png';
var img02URL=http://fabricjs.com/lib/pug.jpg';
var canvas=newfabric.canvas（'c'）；
document.getElementById（'download'）.addEventListener（'click'，function（）{
var data=canvas.toDataURL({
格式：“png”，
乘数：2
});
控制台日志（数据）；
//var img=document.getElementById（'export'）；
//img.src=数据；
}，假）；
var clipRect1=new fabric.Rect({
原文：“左”，
原创：“top”，
角度：90，
左：195，
排名：0，
宽度：200，
身高：200，
填充：'#DDD'，/*使用透明表示无填充*/
冲程宽度：1，
lockMovementX：对，
洛克·莫文蒂：没错，
笔划：“红色”，
角度：5
});
var pugImg=新图像（）；
pugImg.onload=函数（img）{
var pug=新结构。图像（pugImg{
角度：0，
宽度：500，
身高：500，
左：245，
排名：35，
scaleX:0.3，
斯卡利：0.3，
clipName:“帕格”，
clipTo:函数（ctx）{
ctx.save（）；
var myMatrix=this.calcTransformMatrix（）；
myMatrix=fabric.util.invertTransform（myMatrix）；
ctx.transform.apply（ctx，myMatrix）；
clipRect1.渲染（ctx）；
ctx.restore（）；
}
});
canvas.add（哈巴狗）；
};
pugImg.src=img02URL；
#c{
边框：0px实心#ccc；
}

作为图像下载
有人知道该方法吗？未捕获的安全性错误：未能在“HTMLCanvaseElement”上执行“toDataURL”：可能无法导出受污染的画布。您在控制台中注意到这一点了吗？我从小提琴中删除了未使用的函数，以明确是否有人想要帮助。如果需要帮助，您应该提交一个干净的示例。非常感谢您的帮助e回答。我会试试这个，然后告诉你结果。关于乘法器，你是正确的。但是如何设置当前变换的逆？现在可以完成了。我看到了…我在clipTo函数中发布的代码得到了逆矩阵，但是我看到没有简单的方法来获得裁剪对象引用（这）在函数中…可能我们需要更新clipTo方法，或者可能我现在错了忽略我的注释。只是您需要我在代码段中链接的代码的更新版本。您使用的是自定义结构版本吗？在使用结构1.6.0-rc.1时，我得到“TypeError:this.calcTransformMatrix不是函数”