我为我的客户在javascript中构建了一个图像编辑器,我们发出了一个巨大的问题。当我们想要生成图像时,某些文本被旋转,画布不会生成包含背景上所有内容的完整图像。
以下是示例:
当我点击保存按钮时,我得到这样的空白背景:
另一方面,当我只是添加内容而不进行旋转时,CSS中不存在变换,我可以更改文本颜色,更改字体,更改背景,所有内容都会像这个例子一样好看:
结果很完美:
这是我的代码:
function generateImage(canvas, width){
var img = new Image();
img.crossOrigin = "Anonymous";
img.width = width;
img.height = (img.width / ( 16 / 9 ));
img.src = canvas.toDataURL();
img.align = 'middle';
img.class = 'img-responsive';
img.style.width = '100%';
img.style.maxWidth = width;
document.body.appendChild(img);
}
html2canvas($this, {
onrendered: function(canvas) {
generateImage(canvas, ($this.width()+2));
},
width: $this.width()+2,
height: $this.height()+2
});
主要问题是:
有没有办法在画布中添加CSS过渡支持,可以渲染正确的完整图像或一些正常工作的3D画布?