canvas压缩图片变模糊问题

canvas 画图图片变模糊问题

问题描述

1. 在使用 canvas 对图片进行编辑导出图片之后发现图片和原图相比变得模糊了

2. canvas 画图线条变粗

问题产生原因

1. 该问题在 PC 下面并不会产生，原因是移动端现在基本都是 Retina 屏(高倍屏)，当在二倍屏下的时候，会以实际像素的两个像素点来描述一个像素，这个时候 canvas 在屏幕下面就等于占据了双倍的空间，就和图片被放大了两倍一样，所以经过 canvas 编辑的图片会变得模糊

2. canvas 画线的方式并不是从头开始画的，而是从无限细的一像素的中位线的位置开始画的，然后左边占一半右边占一半的方式来画一像素的线条，这个时候计算机是不会绘制小余 1 像素的，所以这个时候就会自然的向左右延伸，这个时候就会出现两个像素的线条了

解决方案

1. 这个问题的解决思路简单来说就是将 canvas 放大为原来的两倍，绘制 canvas 的文字线条也要放大（放大倍数视实际渲染倍数决定），再将它放在一倍的空间下面。

实际渲染倍率 = devicePixelRatio / backingStoreRatio;

devicePixelRatio 设备像素比，代表用几个像素点的宽度来显示一个像素的宽度

backingStorePixelRatio 代表了使用几个像素来存储一个像素的信息，在 ios6 当中这个值为 2，所以这个时候和屏幕像素比率为 1，也就是实际渲染倍率为 1，这个时候不做任何处理也不会出现变模糊的情况

// 设置画布的实际渲染大小，只是简单的对画布进行缩放
canvas.style.width = canvas.width;
canvas.style.height = canvas.height;

// 以实际渲染倍率来放大画布
canvas.width = canvas.width * ratio;
canvas.height = canvas.height * ratio;

2. 使用方法 1 也可以同时解决问题 2，更简单但是治标不治本的方法，只需要根据需求让线条偏移 0.5 像素，纠正 canvas，让计算机不自动多渲染就好了