將圖像加載到document.body背景

Question

我正在嘗試提取圖像（在這種情況下為/camera/frame ，這是一個眾所周知的JPG），並將其加載為document.body的背景。

到目前為止，這是我的代碼：

var backgroundImage = new Image();
backgroundImage.onload = function ()
{
    console.log("onload");
    document.body.style.backgroundImage = this.src;
};

backgroundImage.src = 'camera/frame'; 

"onload"按預期進行打印，並且this.src打印出完整的URL到/camera/frame ，但是document.body.style.backgroundImage仍為"" 。

Answer 1

我相信您可能會錯過兩件事。

var path = 'path/to/image.jpg';
document.body.style.background='url('+path+')';

Answer 2

帆布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();

將圖像加載到背景中，然后無縫地將其繪制到畫布中！