canvas遇到的一些问题
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遇到的一些问题的更多相关文章
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
- Canvas坐标系转换
默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为x=0,y=0的点称作原点.在默认坐标系中,每一个点的坐标都是直接 ...
- Canvas绘图之平移translate、旋转rotate、缩放scale
画布操作介绍 画布绘图的环境通过translate(),scale(),rotate(), setTransform()和transform()来改变,它们会对画布的变换矩阵产生影响. 函数 方法 描 ...
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
随机推荐
- java学习(第四篇)数组
一.一维数组 1.声明,分配内存 int[] a=new int[10]; 数组元素的数据类型 [] 数组名=new 类型 [数组元素个数]: 2.初始化 int[] a=new int[] {1,2 ...
- Ubuntu parted 命令 写在脚本里时要带 -s 参数
否则会要求用户输入,造成脚本卡住.
- AtomineerUtils使用说明
AtomineerUtils使用说明 VS2015PluginCrackAtomineer 介绍 AtomineerUtils 是国外的一款用于生成源代码注释的一款 VS 插件工具. 这款插件,支持 ...
- jdbc批量插入数据
//插入很多书(批量插入用法) public void insertBooks(List<Book> book) { final List<Book> tempBook=b ...
- 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 ...
- 基于java的OpenCV安装和配置
目录 OpenCV简介 OpenCV下载安装 eclipse里引用jar包和配置 OpenCV简介 OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Window ...
- Windows10中打开git bash闪退解决方案
重装系统后打开gitbash莫名其妙闪退... 究其原因,好像是盗版系统的null.sys文件损坏 那就在这里附上null.sys文件的下载链接: https://pan.baidu.com/s/1V ...
- MongoDB学习(三)
MongoDB条件操作符 $gt > 大于 $lt < 小于 $gte >= 大于等于 $lte <= 小于等于 $ne != 不等于 条件操作符可用于查询语句中, ...
- mysql查询连接数
最近公司的测试服务器数据库经常是连接爆满,几次加大了依旧满了. 明明只有几个人在用这个数据库,但是连接数到了三四百.于是就想是谁一直开着连接不释放,于是写了个SQL查了下连接使用情况. SQL如下: ...
- 打造livecd的注意事项
一:在CentOS.ks的定制脚本中,删除syslinux组件:出错提示: /usr/lib/python2.6/site-packages/imgcreate/errors.py:45: Depre ...