Canvas绘制、合并、保存图像以及存在的问题

遇到的问题:Retina屏上字体线条模糊问题

最近帮学校官方微信做了一个头像合成的小页面,用户可以自己选择本地照片,上传并裁剪后,与学校logo合成最终图片,用户可以长按保存到本地,同样,我也把他放到了GitHub金沙官网线上,,效果大概下面这个样子。因为有官方微信的推广,点击量分分钟过5千,虽然是个很一般的东西,自己写的代码也很一般,都是看着朋友圈很多人用着通过自己写的制作器做的头像,感觉很棒哦。

解决方案:放大canvas的大小,然后用css压缩回原大小,例如:想要900*400的画布,先将画布设置为 width="1800px" height="800px",再用css {width: 900px;height: 400px;}压缩。

金沙官网线上 1

 

test.gif

最终效果如下图:

这个页面全部在前端完成,因为HTML5的强大,我没写一句后台代码,此外非常感谢这么优秀的开源项目Cropper.js,为我们提供了这么好的裁剪插件。但是在做的过程中,还是遇到了不少问题,特别是canvas绘的图在手机等高分辨率设备上,会变模糊的问题,所以还是有必要总结一下。

本文由金沙官网线上发布于Web前端,转载请注明出处:Canvas绘制、合并、保存图像以及存在的问题

您可能还会对下面的文章感兴趣: