html5 canvas 导出 图片,html5 canvas，如何导出2x图片？

是的，有几种方法，但每当你拉伸一个非矢量图像时，你会得到一些像素失真。但是，如果它的大小只有它的两倍，那么你可以用最近的邻居来避开它。下面的例子显示了两种不同的方法，一种只是拉伸图像，另一种使用最近的邻居，放大倍数为2。

var canvas = document.getElementById("canvas"),

ctx = canvas.getContext("2d"),

canvas2 = document.getElementById("canvas2"),

ctx2 = canvas2.getContext("2d"),

tempCtx = document.createElement('canvas').getContext('2d'),

img = document.getElementById("testimg"),

zoom = 2;

tempCtx.drawImage(img, 0, 0);

var imgData = tempCtx.getImageData(0, 0, img.width, img.height).data;

canvas.width = img.width * zoom;

canvas.height = img.height * zoom;;

// nearest neighbor

for (var x = 0; x < img.width; ++x) {

for (var y = 0; y < img.height; ++y) {

var i = (y * img.width + x) * 4;

var r = imgData[i];

var g = imgData[i + 1];

var b = imgData[i + 2];

var a = imgData[i + 3];

ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a/255) + ")";

ctx.fillRect(x * zoom, y * zoom, zoom, zoom);

}

}

// stretched

ctx2.drawImage(img, 0, 0, 140, 140);

@phrogz有这个here的一个很好的例子还有，呈现出一些不同的方法可以实现图像尺寸调整。