canvas 截图 drawImage出现误差。但是官网是对着的，因为官网展示的img标签就是图片源像素大小

首先 严重声明，不要头铁 珍爱秀发 自己写截图功能，网上一堆插件呢。

例如 html2Canvas 等等 前端截图 可以用css标签 clip截图

推荐插件  https://github.com/dailc/image-process/blob/master/src/clip/README.md 

 

 

正文：

 

同样一张图片，同样img标签和canvas标签一样大小，都是592 / 333 但是 canvas渲染的图片要小一些，因为canvas渲染的是图片的源像素，img拉伸了， 那么问题来了，canva截图截的也只是图片的原像素坐标。

 

 也就是说。例如 图片原像素  100*100   img像素200*200 

canvas的 drawImage（img，0,0,200,200,0,0,200,200）

在canvas上只能截出 100*100像素大小的全图。。也就是说 canvas上还有100*100像素是空的  透明的  

这样截图肯定不对。。那么解决方法，把图片源像素改成200*200就可以了

舍弃img标签。。另外用一个canvas标签。加载 100*100像素的图片。 然后 drawImage（img，0,0,200,200）  就可以了。。

总之  大家能发现是源图片大小的问题 基本上就能找到解决方案了。。。卡了我一天呐。。

 

还有改变图片源像素  可以去看下这位妹纸的博客

https://blog.csdn.net/vivian_jay/article/details/68933161?ops_request_misc=&request_id=&biz_id=102&utm_source=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0

 

最后要注意的一点 尽量不要用外部地址的图片。。不然前端截图会造成  画布污染  目前好像没有解决方案。。

例如  你http,baidu.cpm的网站，你用 https.taobao.com/img/的地址   这样会造成画布污染。网上搜了下 解决不了这个问题。。。只能避免这个问题，不用外部网站的地址

画布污染 可以看我另外一篇文章。。原理 利用img标签 有个可跨域访问的命令。。然后再放入canvas 再进行裁剪。。这样就不会画布污染