1

见http://jsfiddle.net/jdb1991/6sxke/

我有一个画布元素，它在加载图像之前不知道它将用于什么，所以我需要能够在创建图像对象后动态更改元素的尺寸。

但是出了点问题，因为它似乎在异步运行命令；在调整大小发生之前将图像写入上下文。

4

2 回答 2

3

利用：

function objectifyImage(i) {
    var img_obj = new Image();
    img_obj.src = i;
    return img_obj;
}

var canvas = document.getElementById('display');
var context = canvas.getContext('2d');
i = objectifyImage('https://www.google.co.uk/images/srpr/logo3w.png');
i.onload = function() {
    canvas.width = i.width;
    canvas.height = i.height;

    context.drawImage(i, 0, 0);
};
​

演示：http: //jsfiddle.net/ycjCe/1/

元素可以通过 CSS 任意调整大小，但在渲染过程中，图像会缩放以适应其布局大小。（如果您的渲染看起来失真，请尝试在属性中明确指定您的宽度和高度属性，而不是使用 CSS。）

来源：https ://developer.mozilla.org/en-US/docs/Canvas_tutorial/Basic_usage

于 2012-09-04T08:40:03.127 回答
0

看来 i = objectifyImage 将在定义 image.onload 处理程序之前设置图像 src。这将导致缓存图像在 onload 定义之前加载到某些浏览器上。在设置 image.src 之前总是定义 onload 处理程序以避免缓存图像的计时问题是一个好主意。

var self = this;
.....
this.img = document.createElement('img');
this.img.onload = function () {
    self.loaded = IMGSTATE_OK;
    $Debug.log('loaded image:"' + self.img.src);
    }
this.img.onerror = function () {
    self.loaded = IMGSTATE_ERR;
    $Debug.log('error image:"' + self.img.src);
    }
this.img.src = href;
..... later on check the load state
于 2012-09-04T22:57:10.633 回答