加载图像到织物画布背景

嗨im试图上传图像，并把它作为画布背景。代码片段：加载图像到织物画布背景

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。背景实际上已经设置，但不知何故它不显示。

来源

2012-07-12 Evgeni Roitburg

这似乎很奇怪的混淆。如果你想在HTMLCanvasElement上使用背景图片，为什么不通过CSS设置背景图片呢？

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

或者设置通过JavaScript的CSS：

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

来源

2012-07-12 13:32:07

因为IM加载通过文件API（的FileReader）这张图片。 – 2012-07-12 13:50:46

解决了这个问题，只是在img.onload事件下做了所有的画布任务。 – 2012-07-17 07:47:32

试试下面的代码：从客户端计算机

var raw_reader = new FileReader(); 
raw_reader.onload = function (event){ 
    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]); 
} 
raw_reader.readAsBinaryString(e.target.files[0]);

来源

2013-06-21 09:16:18 bearxy39

加载图像到织物画布背景

回答

相关问题