加载图象到织品帆布背景 [英] load image to fabric canvas background
本文介绍了加载图象到织品帆布背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
您尝试上传图片并将其作为画布背景。代码片段:
hi im trying to upload an image and put it as canvas background. code snippet:
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。背景实际上已经设置,但不知何故它不显示。
the problem is that the canvas not showing the background. i can see the canvas background src in chrome devtools. the background is actually have been set but somehow its not displayed.
推荐答案
这看起来很奇怪。如果你想在HTMLCanvasElement的背景图片,为什么不通过CSS设置背景图片?
That seems strangely confusing. If you want a background image on an HTMLCanvasElement, why not just set the background image via CSS?
#myCanvas {
background-image: url(http://placekitten.com/100/100);
}
或通过JavaScript设置CSS:
Or set the CSS via JavaScript:
canvas.style.backgroundImage = 'url(http://placekitten.com/100/100)';
这篇关于加载图象到织品帆布背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文