javascript - HTML5 画布 .toDataURL() 图像没有背景颜色

Question

问题

使用.toDataURL()HTML5<canvas>元素的方法时，元素的background-color属性不会应用于图片。

问题

这是因为background-color它实际上不是 DOM 样式的一部分canvas，而是 DOM 样式的一部分吗？如果是这样，或者其他什么，有什么办法可以解决这个问题？

小提琴

在这里摆弄一下。base64 字符串记录到控制台。

附加信息

画布是svg使用https://code.google.com/p/canvg/创建的

Answer 1

其他方法可能是创建一个虚拟 CANVAS 并将原始 CANVAS 内容复制到它上面。

//create a dummy CANVAS

destinationCanvas = document.createElement("canvas");
destinationCanvas.width = srcCanvas.width;
destinationCanvas.height = srcCanvas.height;

destCtx = destinationCanvas.getContext('2d');

//create a rectangle with the desired color
destCtx.fillStyle = "#FFFFFF";
destCtx.fillRect(0,0,srcCanvas.width,srcCanvas.height);

//draw the original canvas onto the destination canvas
destCtx.drawImage(srcCanvas, 0, 0);

//finally use the destinationCanvas.toDataURL() method to get the desired output;
destinationCanvas.toDataURL();

Answer 2

你说得对，它实际上不是图像数据的一部分，只是样式的一部分。解决这个问题的最简单方法是在绘制 SVG 之前绘制一个矩形：

var canvas = document.getElementById('test');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, canvas.width, canvas.height);

Answer 3

希望这会有所帮助，

var canvas = document.getElementById('test');

var context = canvas.getContext('2d');

//cache height and width        
var w = canvas.width;
var h = canvas.height;

var data = context.getImageData(0, 0, w, h);

var compositeOperation = context.globalCompositeOperation;

context.globalCompositeOperation = "destination-over";
context.fillStyle = "#fff";
context.fillRect(0,0,w,h);

var imageData = canvas.toDataURL("image/png");

context.clearRect (0,0,w,h);
context.putImageData(data, 0,0);        
context.globalCompositeOperation = compositeOperation;

var a = document.createElement('a');
a.href = imageData;
a.download = 'template.png';
a.click();