使用javascript画布调整图像大小（顺利）

Question

使用javascript画布调整图像大小（顺利）

我试图用帆布调整一些图像的大小，但我对如何平滑它们毫无头绪。在Photoshop，浏览器等..他们使用了一些算法（例如双三次，双线性）但我不知道它们是否内置于画布中。

这是我的小提琴：http：//jsfiddle.net/EWupT/

var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');canvas.width=300canvas.height=234ctx.drawImage(img, 0, 0, 300, 234);document.body.appendChild(canvas);

第一个是普通的已调整大小的图像标记，第二个是画布。请注意画布如何不那么平滑。我怎样才能实现'顺畅'？

Answer 1

由于Trung Le Nguyen Nhat的小提琴根本不正确（它只是在最后一步使用了原始图像），我写了自己的一般小提琴，进行了性能比较：小提琴基本上它是：img.onload = function() {    var canvas = document.createElement('canvas'),        ctx = canvas.getContext("2d"),        oc = document.createElement('canvas'),        octx = oc.getContext('2d');    canvas.width = width; // destination canvas size    canvas.height = canvas.width * img.height / img.width;    var cur = {      width: Math.floor(img.width * 0.5),      height: Math.floor(img.height * 0.5)    }    oc.width = cur.width;    oc.height = cur.height;    octx.drawImage(img, 0, 0, cur.width, cur.height);    while (cur.width * 0.5 > width) {      cur = {        width: Math.floor(cur.width * 0.5),        height: Math.floor(cur.height * 0.5)      };      octx.drawImage(oc, 0, 0, cur.width * 2, cur.height * 2, 0, 0, cur.width, cur.height);    }    ctx.drawImage(oc, 0, 0, cur.width, cur.height, 0, 0, canvas.width, canvas.height);}