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学习之2D转换功能详解
Dec 23 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
移动端html5模拟长按事件的实现方法
Sep 30 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
Jan 03 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 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中CURL方法curl_setopt()函数的参数分享
2013/01/19 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
js控制input输入字符解析
2013/12/27 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python 表格打印代码实例解析
2019/10/12 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
高二物理教学反思
2014/02/08 职场文书
大二法学专业职业生涯规划范文
2014/02/12 职场文书
平安建设实施方案
2014/03/19 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
学校副校长四风对照检查材料整改措施
2014/09/25 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript