[英]Loading Image into document.body Background
I'm attempting to pull an image (in this case, /camera/frame
, which is a known-good JPG), and load it as the background of my document.body
. 我正在尝试提取图像(在这种情况下为/camera/frame
,这是一个众所周知的JPG),并将其加载为document.body
的背景。
Here's my code thus far: 到目前为止,这是我的代码:
var backgroundImage = new Image();
backgroundImage.onload = function ()
{
console.log("onload");
document.body.style.backgroundImage = this.src;
};
backgroundImage.src = 'camera/frame';
"onload"
prints as expected, and this.src prints out the full URL to /camera/frame
, however document.body.style.backgroundImage
remains ""
. "onload"
按预期进行打印,并且this.src打印出完整的URL到/camera/frame
,但是document.body.style.backgroundImage
仍为""
。
I believe you may be missing two things. 我相信您可能会错过两件事。
var path = 'path/to/image.jpg';
document.body.style.background='url('+path+')';
Canvas 2D to the rescue! 帆布2D抢救!
var backgroundImage = new Image();
backgroundImage.onload = function ()
{
var canvas = document.getElementById('canvas');
canvas.width = this.width;
canvas.height = this.height;
var canvasContext = canvas.getContext('2d');
canvasContext.drawImage(this, 0, 0, this.width, this.height);
};
backgroundImage.src = 'camera/frame';
backgroundImage.width = $(window).width();
backgroundImage.height = $(window).height();
Loads the image in the background, then draws it into the canvas seamlessly! 将图像加载到背景中,然后无缝地将其绘制到画布中!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.