-1

キャンバスに画像を描画しようとしています。画像はhtmlファイルの時点でフォルダ内にあります。しかし、drawImage() 関数を呼び出すと、画像が描画されません。ここに私のコードがあります、

var upcan = document.createElement("canvas");
upcan.width = "190";
upcan.height = "380";
upcan.style.cssText = 'border-radius:25px; '
var upctx = upcan.getContext('2d');

var pb = new Image();

pb.onload = function() {
upctx.drawImage(pb,0,0,100,400);
};
pb.src = "photobooth.png";
var canvasData = upcan.toDataURL("image/png");
4

7 に答える 7

1

このコードを試してください...描画画像の後にsrcを提供したので、現在描画中です..

var upcan = document.createElement("canvas");
    upcan.width = "190";
    upcan.height = "380";
    upcan.style.cssText = 'border-radius:25px; '
    var upctx = upcan.getContext('2d');

    var pb = new Image();
    pb.src = "~/../urpath/photobooth.png"; //give here proper path
    pb.onload = function() {
    upctx.drawImage(pb,0,0,100,400);

    };

私はそれがあなたの問題を解決すると思います

于 2012-08-28T11:37:09.400 に答える
0

このページの既存の画像の1つを使用し、本文にキャンバスを追加して、開発者ツールを使用してこのページのChromeでコードを試しました。コードは非常にうまく機能します。問題は別の場所にあるはずです。

于 2012-08-28T11:56:59.190 に答える
0

まず、キャンバスをドキュメントまたはその他の要素に追加しましたか?

于 2012-08-28T11:34:46.813 に答える
0

ロード ハンドラーは非同期で実行されます。イメージがダウンロードされるまで実行されません。現在のスクリプトは引き続き実行されるため、イメージがダウンロードされる前にキャンバスのスナップショットが取得されます。処理をロード ハンドラーに移動して、キャプチャする前にすべてが描画されていることを確認します。

pb.onload = function() {
    upctx.drawImage(pb,0,0,100,400);
    var canvasData = upcan.toDataURL("image/png");
    // do stuff
};
pb.src = "photobooth.png";
于 2012-08-28T22:02:38.303 に答える
0 
    var upcan;
    var img = d.createElement('img');
    var reader = new FileReader();
    reader.onload = (function(aImg, aName) { 
       return function(e) {
        aImg.src = e.target.result;
        aImg.onload = function(){
            var upcan = createImgCanvas(aImg, 100, 400);
        }
    }; })(img, file.name);
    reader.readAsDataURL(file);

function createImgCanvas(img, imgWidth, imgHeight) {
    var canvas = document.createElement('canvas');
    canvas.width = imgWidth;
    canvas.height = imgHeight;
    var imageCanvas2D = canvas.getContext("2d");
    try{
        imageCanvas2D.drawImage(img, 0, 0, imgWidth, imgHeight);
    } catch(err) { alert(err);}
    return canvas;
}
于 2012-08-28T11:31:42.377 に答える
0

これを試して：

var upcan = document.createElement("canvas");
upcan.width = "190";
upcan.height = "380";
upcan.style.cssText = 'border-radius:25px; '
var upctx = upcan.getContext('2d');

var pb = new Image();
pb.src = "photobooth.png";
pb.onload = function() {
upctx.drawImage(pb,0,0);
};
于 2012-08-28T11:32:01.013 に答える