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 相关文章推荐
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
实例讲解CSS3中的border-radius属性
Aug 18 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
解决img标签上下出现间隙的方法
Dec 14 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 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中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】
2016/10/14 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
实现vuex原理的示例
2020/10/21 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
详解python中的Turtle函数库
2018/11/19 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
星级党支部申报材料
2014/05/31 职场文书
初中学习计划书范文
2014/09/15 职场文书
代收款委托书范本
2014/10/01 职场文书
计划生育汇报材料
2014/12/26 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书