Javascript 阅读<；img>；样式到画布（html5，js）

我有一个画布，用户在其中进行交互，然后是最后一个“产品”的

。

标记的样式正确地填充了第一个画布的数据URI

我现在需要获取这个“canvas”作为一个元素，然后将它转换成一个canvas对象。例如：

var canvas = parent.document.getElementById('canvas_holder');
var context = canvas.getContext("2d");
context.strokeStyle = '#f00';
//etc... 

*canvas_holder*是样式设置为真实画布数据URI的

标记。我该如何让这种想法发挥作用？不幸的是，我不能改变

的结构

---

谢谢你的帮助

您不需要处理图像的base64编码版本。只用

var img = document.getElementById('myImage'); // your <img>   

var can = document.getElementById('myCanvas'); // your <canvas>
can.width = img.width;
can.height = img.height;
var ctx = can.getContext('2d');

ctx.drawImage(img, 0, 0, img.width, img.height); // draw the image onto the canvas

var img=document.getElementById（'myImage'）；//你的
var can=document.getElementById（'myCanvas'）；//你的
can.width=img.width；
can.height=img.height；
var ctx=can.getContext（'2d'）；
ctx.drawImage（img，0，0，img.width，img.height）；//将图像绘制到画布上

---

这会将图像绘制到画布上。

我认为OP想告诉我们，图像是前景图像

transparent.png

和背景图像的组合，背景图像由base64编码版本表示。我看到的唯一方法是从中抓取背景图像

var image = new Image();
image.src = $('#canvas_holder').css('background-image').match(/url\("?'?(.*)"?'?\)/)[1];
//  If you don't want to use jQuery, you could get the background-image as
// image.src = document.getElementById('canvas_holder').style.backgroundImage.match(/url\("?'?(.*)"?'?\)/)[1];

var canvas = document.getElementById('yourcanvasid');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);

然后把它粘贴到画布上

var canvas = document.getElementById('yourcanvasid');
var ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0);

然后获取前景图像并将其粘贴到同一画布上

var foreGround = document.getElementById('canvas_holder');
ctx.drawImage(foreGround, 0, 0);

---

我不明白有什么问题。你能确定缺少了什么操作吗？我有一个标记，样式参数用画布对象的数据URI填充。稍后我需要将这个标记作为画布，就像上面提供的示例（canvas_holder是img标记）让我再试试。我明白了：

我现在需要做这样的事情：

var canvas=document.getElementById（'canvas\u holder'）；var context=canvas.getContext（“2d”）；context.strokeStyle='#f00'这显然不起作用-那么你知道如何让它按照我的目标工作吗？你是否试图将图像转换回画布？我试图将对象“canvas”转换成画布对象，在canvas_holder（这是一个）中包含数据uri。这对我没有任何帮助，因为实际的果汁在标记的style属性中，从我所看到的，你的代码并没有得到，但是图像是否显示了style属性中包含的数据？如果没有，您可能希望将
src
属性设置为base64字符串，以便显示数据，然后使用上面的代码…它确实显示样式属性中包含的数据。我的目标是导出PDF—但我只找到了从画布导出PDF的方法—显然，My并不是作为参数进行的。也许我做得比实际更难？是的，可能：-）你可以用我的代码从图像创建画布。创建画布时，图像数据的显示方式与创建画布时的显示方式相同，但实际上不起作用。它不具备这种风格。有没有办法用我的“思考”来做这件事？