ctx.imageSmoothingEnabled = false;
ctx.drawImage(image, 0, 0, scaledW, scaledH);
// 但依然要画到和原图尺寸一样的画布上...ctx.drawImage(canvas, 0, 0, scaledW, scaledH, 0, 0, canvas.width, canvas.height);
};
背后的原理是将小尺寸的图片放到大尺寸的画布上...,自然会“糊”,就像我们把 1x 的图片放在 Retina 屏幕上看一样。...两者尺寸差别越大,模糊会越厉害,最极端的情况能到类似提取主题色那样的效果。因为要先缩小再真正画到画布上,所以先 draw image,再 draw canvas。...根据 MDN,这个函数的第一个参数可以是任何的 canvas 图像源:
绘制到上下文的元素。