html5 canvas合成海报所遇问题及解决方案总结


Posted in HTML / CSS onAugust 03, 2017

前言:最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的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生成的图片出现模糊问题,尤其是图片上有二维码需要识别的,用户根本无法识别;

解决方法:1)可以引用hidpi-canvas.js插件解决此问题;

 2)也可以将canvas的style中的width和height值设置为你想要的大小,然后将canvas的width和height的值分别放大x倍,此处注意,当你在画布中绘制图片或者文字时,相应数值也应放大x倍。

3、合成图片时部分机型图片错乱

问题描述:部分安卓手机在导出canvas的base64图片时,只能显示想要效果图片的一半,初步分析是设备像素比引起的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属性,从而进行相应操作;

html5 canvas合成海报所遇问题及解决方案总结

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生成的图片在微信浏览器中长按无法保存或者识别二维码,安卓部分图片出现此情况,iphone正常,初步分析是图片质量太大导致。

解决方法:导出base64图片时压缩图片质量。

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

后记:目前遇到的问题基本就这些,后期如果遇到什么问题会持续更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3的新特性介绍
Oct 31 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
Mar 25 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
AmazeUI 列表的实现示例
Aug 17 HTML / CSS
amaze ui 的使用详细教程
Aug 19 HTML / CSS
从零实现一个自定义html5播放器的示例代码
Aug 01 #HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 #HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 #HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
Jul 28 #HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 #HTML / CSS
LocalStorage记住用户和密码功能
Jul 24 #HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 #HTML / CSS
You might like
php json_encode与json_decode详解及实例
2016/12/13 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
function, new function, new Function之间的区别
2007/03/08 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
JQuery中serialize()用法实例分析
2015/02/06 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
python如何让类支持比较运算
2018/03/20 Python
基于jupyter代码无法在pycharm中运行的解决方法
2020/04/21 Python
Python字典dict常用方法函数实例
2020/11/09 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
元旦联欢会主持词
2014/03/26 职场文书
希特勒的演讲稿
2014/05/23 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
会计专业自荐信范文
2015/03/05 职场文书
保送生自荐信
2015/03/06 职场文书
催款律师函范文
2015/05/27 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
python析构函数用法及注意事项
2021/06/22 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server