Canvas文档明确没有指定缩放方法-在我自己的测试中,确实确实在Firefox中对图像进行了严重的锯齿处理。
下面的代码从源图像(必须来自相同的Origin或Data URI)中逐像素复制像素,并按指定的因子缩放。
需要额外的屏幕外画布(
src_canvas)来接收原始源图像,然后将其图像数据逐像素复制到屏幕画布上。
var img = new Image();img.src = ...;img.onload = function() { var scale = 8; var src_canvas = document.createElement('canvas'); src_canvas.width = this.width; src_canvas.height = this.height; var src_ctx = src_canvas.getContext('2d'); src_ctx.drawImage(this, 0, 0); var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data; var dst_canvas = document.getElementById('canvas'); dst_canvas.width = this.width * scale; dst_canvas.height = this.height * scale; var dst_ctx = dst_canvas.getContext('2d'); var offset = 0; for (var y = 0; y < this.height; ++y) { for (var x = 0; x < this.width; ++x) { var r = src_data[offset++]; var g = src_data[offset++]; var b = src_data[offset++]; var a = src_data[offset++] / 100.0; dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')'; dst_ctx.fillRect(x * scale, y * scale, scale, scale); } }};


