后加载图像调整尺寸HTML画布

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

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