canvas 图片、文字模糊问题

注：[n]标识为遗留问题，在文章末尾遗留问题部分有详细解释说明。

之前做了一个在线给图片添加文本框的工具，大体思路是先把图片加载到一个 DOM 结构中，然后通过 html2canvas 导出到一个canvas，最后通过 canvas 自带的 toDataURL 方法导出成图片。

这个思路并不复杂，但是中间遇到几个小问题：

1. 跨域图片的导出问题：你可以把图片绘制到 canvas 中，但是不能做任何有关导出数据的操作（比如 toDataURL ），因为 canvas 认为它自己是被污染（tainted）的。（当然本地上传的图片是不存在这个问题的）

   This protects users from having private data exposed by using images to pull information from remote web sites without permission.

   ——出自 canvas-todataurl-securityerror

   大概意思是说，这样可以保护用户隐私数据不被暴露。

2. 在 retina 屏幕上canvas 的内容显示变模糊。

3. 图片模糊就算了，为什么fillText输入的文字也会模糊？而且导出来会清晰一点（但是还是模糊）

解决过程：

1. 第一个问题其实就是解决我们熟悉的跨域问题。这个工具的主要使用场景是在海外的 i8n 项目，图片一般放在海外的图片服务器上。我给图片添加 crossorigin:anonymous 不生效，所以决定换条路。

   既然传统的跨域用法是失败的，但是我们知道 的 src 属性可以用 base64编码后的数据表示图片的内容，这样不会存在跨域问题。所以我想用 FileReader 转换图片格式。但是后来才发现 FileReader 同样不允许处理跨域资源…计划泡汤。

   然后发现这么个工具CORS Anywhere，是给你的请求头部加 CORS header 的。这样一来应该可以解决跨域问题。（未具体尝试）

2. 这个问题才是今天想讲的主题。

   先把网上的解决方法贴出来：

   devicePixelRatio = window.devicePixelRatio || 1,
   backingStoreRatio = context.webkitBackingStorePixelRatio || 1,
   ratio = devicePixelRatio / backingStoreRatio;
   
   var w = $("#code").width();
   var h = $("#code").height();
   
   //要将 canvas 的宽高设置成容器宽高的 2 倍
   var canvas = document.createElement("canvas");
   canvas.width = w * ratio;
   canvas.height = h * ratio;
   canvas.style.width = w + "px";
   canvas.style.height = h + "px";
   var context = canvas.getContext("2d");
   //然后将画布缩放，将图像放大两倍画到画布上
   context.scale(ratio,ratio);
   
   

   上面的代码我们分两部分看，先忽略上面定义 ratio 值的部分，往下看。 说明一下，canvas 的属性 width/height和样式表里指定的宽高不同，前者确定了这个画布的内容大小，而后者只是显示上的大小。所以上面代码就不难理解了，其实是把画布的内容高宽放大二倍，而样式上不变，视觉上就会变得精细很多，和二倍图的原理基本上是类似的。

   道理我都懂，但是代码开头那一大堆在算什么？

   按照上面的逻辑来说，我们只需要通过 devicePixelRatio 判断设备是不是 retina 屏幕（不严格地说）就可以了。为什么要算他和backingStoreRatio的比值，这又是个什么东西？

   我们在往 canvas 里画任何东西的时候，实际上浏览器都在把这些写到了一个后备存储空间里。浏览器在重新绘制到屏幕时候，数据就是来自这里。webkitBackingStorePixelRatio这个值告诉我们的是后备空间相对 canvas 本身容量的大小。

   现在我们知道了这个值的作用，它是如何控制展示的？

image.png

上图展示的是 dpr:bk === 1`的情况，就像没有出现 retina 屏幕这件事一样，导出和汇入两不相干。 关键是两者值都为2的时候也是如此。所以即使是在 retina 屏幕上，也有可能不做多余的代码处理图片也可以很清楚。这也是为什么我们说计算 ratio 的值时我们要算二者的比值而不是单纯用 dpr。 而且这两个更多时候确实没有任何关系，并不是 dpr 为2 bk 的值就也一定高。

image.png

dpr:bk === 2问题出现了。我们原样把图片放进来，canvas 因为 bk 值为1所以没有对图片做其他处理，再展示到页面上的时候就会模糊。这其实跟一般的图片在 retina 屏幕上模糊的原因相同。

比如我们有一个长宽都为30px的图，放到 retina 屏幕上占有 30 csspx 的宽度，但是实际上填充他宽度的有60个物理像素。我们的图片只提供了30个已知的像素值，其余的30个只能靠浏览器根据周围的像素点去计算。所以会模糊。

3. 下面来讨论为什么文字模糊的问题。 刚开始看到文字模糊的时候觉得没什么难理解的，明显是和图片一个套路。但是细想觉得不对，图片是因为在 dpr 为2的情况下，图片内容宽和图片样式宽却是相等的所以模糊。但是文字在我打到页面上到画到 canvas 的过程中，实际像素数是足够的，为什么会模糊？

   在查了部分资料之后发现，在页面上字体的展示和在 Canvas 里 用fillText 去绘制文字是不一样的，后者其实是在 canvas 里「画」字，而这个画的结果的展示单元和上面图片是一样的，到现在为止我们可以把这个过程和图片展示想成相同的了。

   至于为什么下载后会清楚一些但是却不「那么清楚」，我们当做两个问题来解答。 为什么会清楚一些？因为模糊实际上是浏览器渲染时候的行为，下载之后查看图片是没有这个像素估算的过程的。 为什么却不那么清楚？详细的我不想讲了，具体的可以看这个回答

遗留问题： [1]: 发送的 file 协议的请求到服务器端判断跨域的时候和 http 是一样的标准吗？我个人觉得其实应该是的，因为同源策略本身的目的就是出于安全，这一点和你客户端的协议其实是没关系的。

参考文章：

High DPI Canvas

设备像素，设备独立像素，CSS像素

Canvas text rendering (blurry)

作者：刘zx
链接：https://juejin.im/post/5aea7bb85188251cc953b71a
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。