canvas海报制作网页,
最近做了一个用画布合成海报图片的移动项目。因为完全没有canvas的基础，所以在网上找了一个资深demo，但是在开发过程中遇到了很多问题。现在，问题和解决方案总结如下：
1、移动端canvas项目适配全屏问题
描述：由于画布的宽度和高度只能设置为px值，不支持rem单位，所以在移动设备复杂的屏幕分辨率下，很难实现画布覆盖全屏的效果。解决方法：通过js获取手机屏幕的clientWidth值，赋给canvas，达到适配全屏的效果；
var client width=document . documentelement . client width；var canvasWidth=math . floor(client width)；var canvasHeight=math . floor(client width *(1334/750))；$(#main )。css(width ，canvas width px )；$(#main )。css(height ，canvasHeight px )；2、canvas合成的图片出现模糊现象
描述：canvas生成的图片存在模糊问题，尤其是图片上有需要识别的二维码，用户根本无法识别；
解决方法：1)可以参考hidpi-canvas.js插件解决这个问题；
2)还可以将画布样式中的宽度和高度值设置为你想要的大小，然后将画布的宽度和高度值分别放大X倍。这里注意，在画布上画图片或文字时，对应的数值也要放大X倍。
3、合成图片时部分机型图片错乱
描述：当一些Android手机导出画布的base64图像时，只能显示所需图像的一半。初步分析，设备像素比是个bug。
解决方法：获取设备像素比pr，判断型号。这里我只判断是iphone还是Android，还没有问题。合成图片时，我会将宽度和高度值恢复为原始大小。
//hidpi-canvas将画布的宽度和高度属性放大pr倍if(navigator . user agent . match(/iphone/I)){ canvas . width=width；//还原到原始大小canvas.height=height}else{ canvas.width=宽度/pr；//恢复到原始大小canvas . height=height/pr；}4、iphone手机上传图片出现旋转问题
描述：测试中发现iPhone上传的照片有旋转，但是从网上保存的图片没有这个问题，安卓正常。
解决方法：使用exif.js插件可以解决这个问题。这个插件会获取照片拍摄时的角度等信息，主要是方位属性，从而进行相应的操作；
var file=$(this)[0]。文件[0]；EXIF.getData(file，function(){ EXIF . getall tags(this))；Orientation=EXIF.getTag(this， Orientation )；});5、canvas绘制跨域图片无法导出base64图片
描述：当画布中存在跨域请求的图片时，base64图片导出失败。初步分析应该是Canvas本身的安全机制造成的。
解决方法：这个bug需要前端配合解决。首先后端设置图片允许跨域，然后前端设置Img.crossOrigin= Anonymous去做吧。
var pageqrcodeimg=qrcode canvas . toda taurl( image/jpg )；var qrcode img=new Image()；QR code img . cross origin= Anonymous ；qrcodeImg.src=pageqrcodeimgcode img . onload=function(){//画图}6、canvas绘制图片时会出现白屏情况
描述：canvas在画图时偶尔会出现白屏。初步分析表明，绘图操作是在阅读图片之前进行的。
解决方法：在img中加入onload函数，读取图片后再进行画图操作。
code img . onload=function(){//画图}7、微信浏览器中长按图片无法保存
说明：画布生成的图像在微信浏览器中长按无法保存或识别二维码。这种情况出现在部分安卓镜像中，iphone很正常。初步分析图像质量过高。
解决方案：导出base64图像时压缩图像质量。
var my canvas=document . getelementbyid( main )；var image=my canvas . toda taurl( image/JPEG ，0.7)；后记：这些是目前遇到的基本问题。后期遇到什么问题，会持续更新。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。