canvas 重绘图片特别模糊，有没有办法提升一下画质呢

Question

图片合成文字，but图片生成出来扫不出二维码。有没有大佬知道怎么解决啊

Answer 1

不知道用的是不是离屏Canvas，注意下Canvas尽量用原生的width和height属性设置宽高，不要用CSS，也不要一起用。另外像二维码这种其实是属于需要边缘锐利且带有矢量风格的图片，输出时尽量采用PNG，而不要用有损压缩方式的JPEG，尤其是当你图片很小的时候，会比较容易糊。

另外如果二维码内内容比较多的时候，可以适当降低误码率（好多默认的就是40%，可以调整到更低一些），使二维码内的方块更大更清晰，也会部分抵消图片模糊所带来的影响。

Answer 2

canvas宽高是怎么写的呢？

    canvas.width = '300px'
    canvas.height = '300px'

canvas设置高度不需要用attr的，直接修改width或者height，你试试

Answer 3

想到解决方法了。因为是要生成图片。
$('#main').attr("width", $("#starImg").width()*2.5);
$('#main').attr("height", $("#starImg").height()*2.5);

直接设置了给canvas放大。隐藏。
再给图片设置自适应宽高。出来的图片画质基本跟原来的没什么区别了

Answer 4

canvas渲染模糊可能是因为对retina的适应需要做一下。

可以参考一下这个： https://github.com/PengJiyuan...

还有在绘制之前，试试加上ctx.translate(0.5, -0.5)试试