分享一个用canvas合成海报图片的挪移端项目-
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生成的图片涌现依稀题目，尤为是图片上有二维码需要辨认的，会员基本没法辨认；
解决办法：1）可以援用hidpi-canvas.js插件解决此题目；
2）也可以将canvas的style中的width和height值设定为你想要的大小，然后将canvas的width和height的值离别放大x倍，此处注意，当你在画布中绘制图片或者文字时，响应数值也应放大x倍。
3、合成图片时局部机型图片错乱
题目描述：局部安卓手机在导出canvas的base64图片时，只能显示想要结果图片的一半，初步剖析是设施像素比引起的bug。
解决办法：猎取设施像素比pr，推断机型，此处我只推断了是苹果还是安卓，临时还未涌现题目，合成图片时再将width和height值恢复到本来的大小。
//hidpi-canvas将canvas的width和height属性放大pr倍
if (navigator.userAgent.match(/苹果/i)) {
canvas.width = width ;//恢复为原先的大小
canvas.height = height ;
}else{
canvas.width = width / pr;//恢复为原先的大小
canvas.height = height / pr;
}
4、苹果手机上传图片涌现扭转题目
题目描述：测试时发明，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生成的图片在微信阅读器中长按没法保留或者辨认二维码，安卓局部图片涌现此状况，苹果正常，初步剖析是图片质量太大致使。
解决办法：导出base64图片时紧缩图片质量。
var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpeg",0.7);
跋文：当前碰到的题目根本就这些，后期要是碰到什么题目会延续更新。
以上就是分享一个用canvas合成海报图片的挪移端项目的细致内容，更多请关注 百分百源码网 其它相干文章！
