Canvas в HTML5.изображение toDataURL() не имеет цвета фона

при использовании .toDataURL() метод HTML5 <canvas> элемент background-color свойство элемента не применяется к изображению.

вопрос

это произошло потому, что background-color на самом деле не является частью canvas, но стиль DOM? Если да, или что-то еще, что может быть обходным путем для этого?

Скрипка

скрипку, чтобы играть с здесь. Строка base64 регистрируется в приставка.

дополнительная информация

холст создается из svg использование https://code.google.com/p/canvg/

10
canvas html5 javascript

2 ответов

вы правы, что на самом деле это не часть данных изображения, а только часть стиля. Самый простой способ обойти это - просто нарисовать прямоугольник перед рисованием SVG:

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

другим подходом может быть создание фиктивного холста и копирование на него исходного содержимого холста.

//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();
20