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,js)
Dec 12 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
May 12 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
html5使用window.postMessage进行跨域实现数据交互的一次实战
Feb 24 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编码规范的深入探讨
2013/06/06 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
SyntaxHighlighter语法高亮插件使用说明
2011/08/14 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
浅谈PDF.js使用心得
2018/06/07 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
vue设置一开始进入的页面教程
2019/10/28 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
安全月活动总结
2014/05/05 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android