最近做了一个用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.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);

后记:目前遇到的问题基本就这些,后期如果遇到什么问题会持续更新。

<canvas合成海报>所遇问题及解决方案总结的更多相关文章

  1. H5项目开发分享——用Canvas合成文字

    以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...

  2. H5上传图片并使用canvas制作海报

    马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...

  3. canvas合成和裁剪

    canvas合成和裁剪 属性 globalCompositeOperation=type 设置覆盖类型 source-over 源覆盖在目标上 source-in 源覆盖在目标上的公共部分(只取源图形 ...

  4. 通过canvas合成图片

    通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...

  5. 微信小程序利用canvas生成海报分享图片

    一 . 效果 这是借用女神照生成的分享的海报,图片来自网络. 新增了poster组件和更新图片自适应 二 . 准备 准备两张图片连接,最好是自己开发账号验证的https图片链接. 三 . 实现思路 其 ...

  6. 实验五  用PS制作图文合成海报

    实验五  用PS制作图文合成海报 [实验目的] ⑴.熟悉PS软件基本操作 ⑵.学会用PS制作内容较丰富的海报式广告 [实验条件] ⑴.个人计算机一台 ⑵.个人计算机中预装Windows7操作系统和浏览 ...

  7. 动态生成二维码并利用canvas合成出一张图片(类似海报、分享页)

    在前端开发并打算推广一个APP的时候,推广页是免不了的,而推广页的展示方式一般是给人家一个二维码,让别人自己去安装APP,这样前段任务也达到了,这次写这篇文章的原因主要还是总结一下,其中有很多不完善的 ...

  8. H5利用canvas实现海报功能

    最近接到一个需求,微信中用户上传图片生成海报.这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可.思路 ...

  9. vue 把后端返回的图片和url链接生成的二维码用canvas 合成一张图片

    H5 页面在做某个活动的时候,有两种分享方式,一种是链接分享,一种是图片分享. 链接分享的话,如果是在微信里,就可引导用户利用微信浏览器自带的分享,根据sdk设置分享标题简介链接缩略图即可. 图片分享 ...

随机推荐

  1. linux安装vmware tools 步骤

    虚拟机 -- 安装 VMware Tools 会自动挂载光驱. 1.  cd /misc/cd 2.  copy 文件到临时文件夹cp VMwareTools-9.6.2-1688356.tar.gz ...

  2. Python数据类型之变量

    变量 在程序设计中,变数(英语:Variable,scalar)是指一个包含部分已知或未知数值或资讯(即一个值)之储存位址,以及相对应之符号名称(识别字).通常使用变数名称参照储存值:将名称和内容分开 ...

  3. C语言实验单片机串口发送int型数据

    void SendIint(int n)reentrant { unsigned char s; while(n!=0) { s=(unsigned char)n%10+48; SendByte(s) ...

  4. jQuery使用记录

    jQuery方法获得的集合为类数组对象,可以用一些数组的方法.集合里面的元素为DOM元素,不是jQuery对象. jQuery设置css3属性的兼容性写法: $(element).css({ &quo ...

  5. swift闭包中解决循环引用的问题

    swift中可以通过三种方法解决循环引用的问题 利用类似oc方法解决循环引用weak var weakSelf = self weak var weakSelf = self loadData = { ...

  6. Ultimus BPM 零售和快消品行业应用解决方案

    Ultimus BPM 零售和快消品行业应用解决方案 行业应用需求 中国零售及快消品行业正在经历深刻变化.经济下滑,消费回落,行业危机继续发酵:人员工资.房租费用进一步上涨,成本高涨成为不能承受之重: ...

  7. javaWeb学习总结(6)- 会话之cookie技术

    什么是会话? 在日常生活中,从拨通电话到挂断电话之间的一连串的你问我答的过程就是一个会话. 会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为 ...

  8. java日期工具类(Long型,Date型,yyyyMMdd型)等

    import java.sql.Timestamp; import java.text.ParsePosition; import java.text.SimpleDateFormat; import ...

  9. Java虚拟机原理

    1.编译机制 分析和输入到符号表: 词法分析:将代码转化为token序列 语法分析:由token序列生成抽象语法树 输入到符号表:将类中出现的符号输入到类的符号表 注解处理: 处理用户自定义注解,之后 ...

  10. 点评阿里JAVA手册之异常日志(异常处理 日志规约 )

    下载原版阿里JAVA开发手册  [阿里巴巴Java开发手册v1.2.0] 本文主要是对照阿里开发手册,注释自己在工作中运用情况. 本文内容:异常处理 日志规约 本文难度系数为一星(★) 本文为第三篇 ...