0

我有一个用户进行交互的画布，然后是<img>最终的“产品”。标记的<img>样式正确填充了第一个画布的数据 URI。

我现在需要获取这个“画布”作为元素，然后将其转换为画布对象。例子：

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

*canvas_holder* 是<img>样式设置为真实画布数据 URI 的标签。我将如何使这种想法发挥作用？不幸的是，我无法更改 的结构。<img>

感谢任何帮助！

4

2 回答 2

0

您不需要弄乱图像的 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

这应该将图像绘制到画布上。

于 2012-11-08T12:29:29.697 回答
0

我认为 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 foreGround = document.getElementById('canvas_holder');
ctx.drawImage(foreGround, 0, 0);
于 2012-11-09T09:01:53.787 回答