canvas合成海报所遇问题及解决方案总结
最近做了一个用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属性,从而进行相应操作;
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.οnlοad=function(){//绘制图片 }
6、canvas绘制图片时会出现白屏情况
问题描述:canvas绘制图片时偶尔会出现白屏情况,初步分析是图片还没读取完毕就执行了绘图操作。
解决方法:给img添加onload函数,图片读取完毕再执行绘图操作。
qrcodeImg.οnlοad=function(){//绘制图片 }
7、微信浏览中中长按图片无法保存
问题描述:通过canvas生成的图片在微信浏览器中长按无法保存或者识别二维码,安卓部分图片出现此情况,iphone正常,初步分析是图片质量太大导致。
解决方法:导出base64图片时压缩图片质量。
var mycanvas = document.getElementById("main"); var image = mycanvas.toDataURL("image/jpeg",0.7);
后记:目前遇到的问题基本就这些,后期如果遇到什么问题会持续更新。
转载于:https://www.cnblogs.com/yanglei0323/p/7095680.html
canvas合成海报所遇问题及解决方案总结相关推荐
- 微信小程序 canvas 合成海报
1.先百度了解canvas相关文档: 2.了解微信小程序授权登录与授权登录下保存图片权限问题: 3.canvas标签属性不能是display:none: <canvas class=" ...
- canvas合成海报图
根据接口返回的参数生成一个带有相关链接的二维码 然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面 所需要的参数和图片列表都是父组件传过来的 使用了之前写过的alert弹窗 <tem ...
- canvas生成海报toDataUrl报错,解决方案
微信公众号H5页面,生成带参数二维码海报的思路. 一.生成带参数二维码 使用插件phpqrcode,这个功能在之前的文章中有记录.不在赘述. 二.生成canvas画布 先将海报内容通过cavans画出 ...
- h5 canvas 合成海报
文章目录 效果 实现 效果 实现 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- 利用canvas把二维码和图片合成海报
思路:在微信中登录,后台传来的是一个链接.一个名字.一张图片.把图片当做背景,画满整个画布.之后需要把链接转为二维码,使用jq.qrcode转化,转化完成后是一个canvas,把这个canvas再转成 ...
- canvas图片合成海报
canvas图片合成海报 //创建一共hb.js代码如下 var sthb = {//参数说明:info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
- vue 中生成二维码,合成海报
1.分别引入 qrcodejs2.html2canvas 执行以下命令行 npm install qrcodejs2 npm install html2canvas 2.下载canvas2image, ...
最新文章
- 【数字信号处理】基本序列 ( 正弦序列 | 数字角频率 ω | 模拟角频率 Ω | 数字频率 f | 模拟频率 f0 | 采样频率 Fs | 采样周期 T )
- Android中AVD(Android Virtual Device)不能启动的处理方法
- 推荐一个在线查看.cer文件的网站
- Jquery 实现原理之 Ajax
- Flex DataGrid 筛选实现
- java运行python脚本_java调用python脚本,中文变成问号
- Python:anaconda3/bin/activate: Permission denied
- h3c Vlan和Trunk实验
- matlab10的阶层怎么输入,matlab阶乘和程序
- 看单片机原理图-最小系统
- 计算机网络---网络编程套接字(二)
- 软件即服务已经过时 硬件即服务促成云计算
- Docker 下载安装 Docker 配置镜像加速器
- 【Linux】linux内核原子操作的实现
- 使用muscle多序列比对
- verilog计数器
- SpringBoot 1.X 优雅停机 ( shutdown gracefully )
- 苹果电脑显示内存不足有什么办法解决
- mysql force作用_mysql force index 用途
- FreeEIM 2.6 最新版飞鸽传书