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实现漂亮便签样式
Mar 18 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 Notification(桌面提醒)功能使用实例
Mar 17 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
移动HTML5前端框架—MUI的使用
Dec 18 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 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 session机制
2011/07/17 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
npm的lock机制解析
2019/06/20 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python中os模块功能与用法详解
2020/02/26 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
工程招投标邀请书
2014/01/30 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
优秀班主任经验交流材料
2014/06/02 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
老人与海读书笔记
2015/06/26 职场文书
投资入股协议书
2016/03/22 职场文书
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
使用Redis实现分布式锁的方法
2022/06/16 Redis