1、移动端无法全屏问题

问题描述:由于canvas的width和height只能设置px值,不支持rem单位,所以想在移动设备屏幕分辨率繁杂的情况下达到canvas铺满全屏的效果很困难。

  解决方法:通过js获取到手机屏幕的clientWidth值,赋给canvas,以此来达到适配全屏的效果;

1
2
3
4
5
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值恢复到原来的大小。

1
2
3
4
5
6
7
8
//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属性,从而进行相应操作;

  

1
2
3
4
5
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";即可。

1
2
3
4
5
6
7
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函数,图片读取完毕再执行绘图操作。

1
2
3
qrcodeImg.οnlοad=function(){
        //绘制图片
}

7、微信浏览中中长按图片无法保存

  问题描述:通过canvas生成的图片在微信浏览器中长按无法保存或者识别二维码,安卓部分图片出现此情况,iphone正常,初步分析是图片质量太大导致。

  解决方法:导出base64图片时压缩图片质量。

1
2
var mycanvas = document.getElementById("main");
var image = mycanvas.toDataURL("image/jpeg",0.7);

canvas遇到的一些问题的更多相关文章

  1. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  2. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

  3. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  4. 获取Canvas当前坐标系矩阵

    前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...

  5. Canvas坐标系转换

    默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...

  6. Canvas绘图之平移translate、旋转rotate、缩放scale

    画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...

  7. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  8. html5标签canvas函数drawImage使用方法

    html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

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

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

随机推荐

  1. java学习(第四篇)数组

    一.一维数组 1.声明,分配内存 int[] a=new int[10]; 数组元素的数据类型 [] 数组名=new 类型 [数组元素个数]: 2.初始化 int[] a=new int[] {1,2 ...

  2. Ubuntu parted 命令 写在脚本里时要带 -s 参数

    否则会要求用户输入,造成脚本卡住.

  3. AtomineerUtils使用说明

    AtomineerUtils使用说明 VS2015PluginCrackAtomineer 介绍 AtomineerUtils 是国外的一款用于生成源代码注释的一款 VS 插件工具. 这款插件,支持 ...

  4. jdbc批量插入数据

    //插入很多书(批量插入用法) public void insertBooks(List<Book> book) {   final List<Book> tempBook=b ...

  5. HDU 5954 Do Not Pour Out

    #include<bits/stdc++.h> using namespace std; #define rep(i,a,b) for(int i=a;i<=b;++i) #defi ...

  6. 基于java的OpenCV安装和配置

    目录 OpenCV简介 OpenCV下载安装 eclipse里引用jar包和配置 OpenCV简介 OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Window ...

  7. Windows10中打开git bash闪退解决方案

    重装系统后打开gitbash莫名其妙闪退... 究其原因,好像是盗版系统的null.sys文件损坏 那就在这里附上null.sys文件的下载链接: https://pan.baidu.com/s/1V ...

  8. MongoDB学习(三)

    MongoDB条件操作符 $gt  > 大于 $lt   < 小于 $gte >= 大于等于 $lte  <= 小于等于 $ne  !=  不等于 条件操作符可用于查询语句中, ...

  9. mysql查询连接数

    最近公司的测试服务器数据库经常是连接爆满,几次加大了依旧满了. 明明只有几个人在用这个数据库,但是连接数到了三四百.于是就想是谁一直开着连接不释放,于是写了个SQL查了下连接使用情况. SQL如下: ...

  10. 打造livecd的注意事项

    一:在CentOS.ks的定制脚本中,删除syslinux组件:出错提示: /usr/lib/python2.6/site-packages/imgcreate/errors.py:45: Depre ...