图像

图像处理API是通过Image对象来提供的。 如上图所示，Image是一个封装了HTMLImageElement接口的构造器，和document.createElement('img')一样，返回一个 HTMLImageElement 实例。

使用Image对象可以实现图像预加载功能。如下所示：

function loadImage(url, callback) {
    var img = new Image(); //创建一个Image对象，实现图像的预下载
    img.src = url;
   
    img.onload = function () { //图像下载完毕时异步调用callback函数。
        callback(img);
    };
};

在图像加载完毕之后，我们可以在回调函数里获取图像的大小，作相应的处理。

var imgUrl = "/images/sample1.jpg";
    div1 = document.getElementById("div1");
    
var callback = function(img) {
    //将图像设为DIV的背景并自动调整DIV的大小。
    div1.style.backgroundImage = "url('" + img.src+ "')";
    div.style.width = img.width + "px";
    div.style.height = img.height + "px";
};

loadImage(imgUrl,callback);