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

transparent.pngOPは、画像が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 に答える