HTML5 canvas 画图， 大图缩小时清晰度问题
原图很大，9560*3860，所以用 canvas 画到浏览器里面时需要缩小。
我用的是参数最多的那个 drawImage 即 (image, sourceX, sourceY, sourceWidth, sourceHeight,destX, destY, destWidth, destHeight)，但怎么画画出来的图像都很模糊，请教万能的网友，这是什么原因导致，怎样可以解决清晰度问题，做到像img元素那样的清晰度，完全解决疑惑了再额外加分
<!DOCTYPE html><html><head> <title>图像清晰度测试</title> <meta charset='utf-8'></head><body style='text-align:center'><canvas width='1024' height='413' id='canvas1' style='border:1px solid'></canvas><img style="-webkit-user-select: none; cursor: zoom-in;" src="office.png" width="1024" height="413" id="imgSrc"><script> var canvas=document.getElementById('canvas1'); var context=canvas.getContext('2d'); var imgSrc=document.getElementById('imgSrc'); var img = new Image(); img.src = "office.png"; img.addEventListener("load",function(){ context.drawImage(img,0,0,this.naturalWidth ,this.naturalHeight , 0, 0,1024,413); });</script></body></html>
这是原图：
这是我web网页程序效果图，上图是canvas，下图是img
解决方案是自己写算法进行平均采样
实现方式有两种，一种是js对像素点进行手动合并采样，具体算法可以用这个：github。com斜杠sapics斜杠scale.js
还有一个方案使用webgl，用gpu对图片进行平均合并采样，需要自己写shader，并且需要比较新的浏览器和电脑，需要支持webgl，运行效率比较高。