前言 通常来说，大家对svg与canvas的首要区别与印象，是svg具有与设备、分辨率无关的特性，转而普遍就认为canvas区别于svg的一大劣势就在于此。 个人愚见，更合理的描述应该是canvas对

HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。如不特别指明，图片的类型默认为 image/png，分辨率为96dpi。 这里看到压缩效果已经由原来的8.5Mb到…

最近在做canvas粒子动画效果的研究，发现当粒子数量达到一定等级的时候，动画效果会变慢变卡。搜索了一下解决办法，发现离屏渲染是推荐最多的解决办法，那本文就利用离屏渲染实现一个动画效果来对比性能的提升。 查阅了一下资料，概述一下离屏渲染的概念，相当于在屏幕渲染的时候开辟一个缓冲…

图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。 由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。 这里为了交互体验，使用了element-ui的弹窗方式。将canvas画布放到了弹…

1.首先将html保存为base64图片 html2canvas百度一下代码很多，这里废话不多说，直接上代码 因为是将html里部分保存为图片，所以以下代码实现的是全屏画布上展示需要的部分 2.将获取

useCORS 设置允许跨域，特别提醒 allowTaint 也是允许跨域，但是这个允许跨域只是允许你跨域生成canvas ，但是还是不能把canvas转化成图片，要想解决toDataURL 的跨域问题，还需要使用useCORS。但是这两个属性不能共生 可能这个题目不是很好的描…

使用 canvas 实现截图功能的难点有三：1. 计算截取区域；2 截图动画效果（未被选取部分置灰，截取部分添加边框等）；3. 生成&获得截取区域图片。

canvas 性能优化，以及常见问题

最终效果 核心代码 获取图片的像素信息 我们创建一个canvas，渲染图片，然后通过 getImageData 方法拿到图片信息。 打印出来的图片信息为： width: 图片宽度 height: 图片