使用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);}