读 <img> 画布样式（html5，js）

Question

I have a canvas where the user make interactions, then a <img> for the final "product". The <img> tag has the style properly filled with the data URI of the first canvas.

I now need to fetch this "canvas" as a element then transform it into a canvas object. Example:

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

*canvas_holder* is the <img> tag with style set to real canvas data URI. How would I go to make this thinking work? I can not change the structure of the <img> , unfortunately.

Appreciate any help!

Answer 1

You don't need to mess with the base64-encoded version of the image. Just use

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

This should draw the image onto the canvas.

Answer 2

I think the OP wants to tell us that the image is a combination of a foreground image transparent.png and a background image which is represented by its base64 encoded version. The only way I see is to grab the background image from

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];

and paste it onto the canvas.

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

and then get the foreground image and paste it onto the same canvas

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