Javascript 画布不呈现css3的过滤器

由于canvas不支持来自跨域的图像，因此此小提琴可能会导致一些小问题，但您始终可以在计算机上本地检查

HTML

制作帆布

JavaScript（使用jQuery）

$（'canvasMake'）。单击（函数（）{
html2canvas（document.getElementById（'html2canvas'）{
onrendered：函数（画布）{
document.body.appendChild（画布）；
var dataurl=canvas.toDataURL（'image/png'），
img=document.createElement（“img”）；
img.src=数据URL；
文件.正文.附件（img）；
}
});       
});

结果

预期结果（通过剪切工具完成）

我知道我可以通过以某种方式实现这一点

---

但我不太确定如何获得正确的输出。有人能给我引路吗？

这对我们来说太多了。请定位问题并更新JSFIDLE