2

Html5 CanvasでtoDataURLを使用して、新しいウィンドウで画像をPNGファイルにエクスポートしようとしています。

これが私のJSコードです（何か問題があるかどうかを確認するには、すべてを確認する必要があると思います）

var oCtx;
var oCanvas;
var img;
var oImg;

function updateClicked() {


    oCanvas.width = oCanvas.width;
    oCtx.drawImage(img,0,0); 

    oCtx.font = "normal 23px arial";     // different font
oCtx.textBaseline = "top";           // text baseline at the top
oCtx.fillStyle = "#666";
oCtx.fillText(document.getElementById("attentionde").value, 255, 365);

oCtx.font = "bold 28px arial";     // different font
oCtx.fillStyle = "red";
oCtx.fillText(document.getElementById("nofacture").value, 172, 226);

}
// setup our test canvas
// and a simple drawing function
window.onload = function() {
    oCanvas = document.getElementById("thecanvas");
    oCtx = oCanvas.getContext("2d");

    var iWidth = oCanvas.width;
    var iHeight = oCanvas.height;

    img=new Image();
    img.src="Fond_Facture_Medio.jpg"; //My background image source

//BACKGROUND-IMAGE//
img.onload = function(){
oCtx.drawImage(img,0,0);  

};

var dataUrl = oCanvas.toDataURL();

var button = document.getElementById("thebutton");
button.onclick =function() {
  window.open(dataUrl, "toDataURL() image", "width=1275, height=1650");
}  
}​

ボタン（id = "thebutton"）をクリックすると、PNGファイルを含む新しいウィンドウが開きますが、pngが空白になっています...キャンバスに描画された画像が取得されないようです。不明な理由。

行の直前にこのコードを追加してみましたvar dataUrl = oCanvas.toDataURL();：

oCtx.fillStyle = "rgba(0, 0, 255, .5)";
oCtx.fillRect(25, 25, 125, 125);

図形を描画しているかどうかをテストするためだけに、dataURLプロセスを介して図形を保存します。テストしたところ、「ボタン」ボタンをクリックすると、新しいウィンドウが開き、出来上がり！水色の長方形が入ったキャンバス画像を表示して保存することができました...しかし、背景画像もテキストもありません...他には何もありません。何が悪いのか本当にわかりません。ありがとうございました！

4

1 に答える 1

1

この行を移動します

var dataUrl = oCanvas.toDataURL();

button.onclickハンドラー内。

データURLを作成した時点では、window要素もimg要素もそのloadイベントを発生させていないため、何も描画されていません。

于 2012-11-05T14:57:04.587 に答える