javascript - イメージをファブリック キャンバスの背景にロードする

Question

こんにちは、画像をアップロードしてキャンバスの背景にしようとしています。コードスニペット：

function handleMenuImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.src = event.target.result;
        canvas.setWidth(img.width);
        canvas.setHeight(img.height);
        canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas));

        //set the page background
        menuPages[currentPage].pageBackground.src = img.src;
        canvas.backgroundImageStretch = false;

    }
    reader.readAsDataURL(e.target.files[0]); 
}

問題は、キャンバスに背景が表示されないことです。chrome devtools でキャンバスの背景 src を確認できます。背景は実際に設定されていますが、なぜか表示されません。

Answer 1

それは奇妙に混乱しているようです。HTMLCanvasElement に背景画像が必要な場合は、CSS を介して背景画像を設定してみませんか?

#myCanvas {
  background-image: url(http://placekitten.com/100/100);
}

または、JavaScript を使用して CSS を設定します。

canvas.style.backgroundImage = 'url(http://placekitten.com/100/100)';