html5 canvas生成海报所遇难题及处理计划方案总结

2021-02-23 19:32 jianzhan

序言:近期做了1个用canvas生成海报照片的挪动端新项目,因为1点canvas基本都沒有,因此去在网上搜了1位老前辈的demo,可是开发设计全过程中遇到了许多难题,现将所遇难题及处理方式总结以下:

1、挪动端canvas新项目兼容全屏难题

难题叙述:因为canvas的width和height只能设定px值,不适用rem企业,因此想在挪动机器设备显示屏辨别率复杂的状况下做到canvas铺满全屏的实际效果很艰难。处理方式:根据js获得得手机显示屏的clientWidth值,赋给canvas,以此来做到兼容全屏的实际效果;

var clientWidth = document.documentElement.clientWidth;  
var canvasWidth = Math.floor(clientWidth);  
var canvasHeight = Math.floor(clientWidth*(1334/750));  
$("#main").css('width',canvasWidth+'px');  
$("#main").css('height',canvasHeight+'px');  

2、canvas生成的照片出現模糊不清状况

难题叙述:canvas转化成的照片出現模糊不清难题,特别是照片上有2维码必须鉴别的,客户压根没法鉴别;

处理方式:1)能够引入hidpi-canvas.js软件处理此难题;

     2)还可以将canvas的style中的width和height值设定为你要想的尺寸,随后将canvas的width和height的值各自变大x倍,此处留意,当你在画布中绘图照片或文本时,相应标值也应变大x倍。

3、生成照片时一部分机型照片紊乱

难题叙述:一部分安卓系统手机上在导出来canvas的base64照片时,只能显示信息要想实际效果照片的1半,基本剖析是机器设备像素比引发的bug。

处理方式:获得机器设备像素比pr,分辨机型,此处我只分辨了是iphone還是安卓系统,临时还未出現难题,生成照片时再将width和height值修复到原先的尺寸。

//hidpi-canvas将canvas的width和height特性变大pr倍  
if (navigator.userAgent.match(/iphone/i)) {  
    canvas.width = width ;//修复为本来的尺寸  
    canvas.height = height ;  
}else{  
    canvas.width = width / pr;//修复为本来的尺寸  
    canvas.height = height / pr;  
}  

4、iphone手机上提交照片出現转动难题

难题叙述:检测时发现,iPhone手机上提交相片出現转动状况,而提交从在网上储存的照片则不容易出現此难题,安卓系统一切正常。

处理方式:此难题可以使用exif.js软件处理,此软件会获得相片拍攝时的角度等信息内容,关键是Orientation特性,从而开展相应实际操作;

var file = $(this)[0].files[0];  
EXIF.getData(file, function() {    
    EXIF.getAllTags(this);       
    Orientation = EXIF.getTag(this, 'Orientation');    
});   

5、canvas绘图跨域照片没法导出来base64照片

难题叙述:当画布中存在跨域恳求来的照片时,导出来base64照片不成功,基本剖析应当是canvas自身的安全性体制引发的。

处理方式:此bug必须前后左右端相互配合处理,最先后端开发设定照片容许跨域,随后前端开发设定Img.crossOrigin = "Anonymous";便可。

var pageqrcodeimg = qrcodecanvas.toDataURL('image/jpg');  
var qrcodeImg = new Image();  
qrcodeImg.crossOrigin = "Anonymous";   
qrcodeImg.src = pageqrcodeimg;  
qrcodeImg.onload=function(){  
        //绘图照片  
}  

6、canvas绘图照片时会出現白屏状况

难题叙述:canvas绘图照片时有时候会出現白屏状况,基本剖析是照片还没载入结束就实行了制图实际操作。

处理方式:给img加上onload涵数,照片载入结束再实行制图实际操作。

qrcodeImg.onload=function(){  
        //绘图照片  
}

 7、手机微信访问器中长按照片没法储存

难题叙述:根据canvas转化成的照片在手机微信访问器中长按没法储存或鉴别2维码,安卓系统一部分照片出現此状况,iphone一切正常,基本剖析是照片品质太大致使。

处理方式:导出来base64照片时缩小照片品质。

var mycanvas = document.getElementById("main");  
var image = mycanvas.toDataURL("image/jpeg",0.7);  

续篇:现阶段遇到的难题基础就这些,后期假如遇到甚么难题会不断升级。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。