Question

请参阅http://jsfiddle.net/jdb1991/6sxke/

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

但是有些东西出了问题，因为它似乎是异步运行命令;在调整大小之前将图像写入上下文。

Answer 1

使用：

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

Answer 2

看来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

加载图像后调整HTML画布大小

2 个答案: