## H5 canvas画图白板踩坑
最近接手了一个小型的H5，最主要的功能大概就是拍照上传和canvas画板了。
主要是记录一下自己菜到像傻子一样的技术。
1、canvas画板隔空打牛！画布越往上部分错位距离越小，越往下距离越大。
2、图片上传！白板涂鸦的内容是以base64的形式传给后端工程师的，图片上传的图片是路径，后端要求统一格式，所以需要把路径转为base64。
3、算是谷歌的限制，前端发起请求后端可以收到，也给了返回值，但前端在浏览器里看不到返回值。
就上面的问题做个记录。把我的解决办法记录一下，不是最优的还有可能是错误的，如果你看到能碰撞出你的想法或者暂时帮到你那就太好了，如果没有也希望得到你的帮助，一起加油！
先说一下项目的大体情况，该项目是一个H5，用的原生，框架是Mui。下面是解决办法：
1、画板隔空打牛的这个问题解决办法是画板的宽高等于手机屏幕的宽高就不会出现这个问题了，之所以会出现这个问题是你在页面上使用高了，把画布的大小改变了从而位置发生了改变。不要给css定高。如果需求实在需要写，那就使用定位，脱离文档流。
2、js图片转base64
方式一：Blob和FileReader 对象
实现原理：
- 使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]
- 使用FileReader 对象接收blob
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 图片转base64方式</title>
</head> <body>
<p id="container1"></p>
<script>
getBase64("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")
function getBase64(imgUrl) {
window.URL = window.URL || window.webkitURL;
var xhr = new XMLHttpRequest();
xhr.open("get", imgUrl, true);
//只要拿到这个blob，问题就好解决了所以它挺重要的。
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
//这个时候得到了一个blob对象
var blob = this.response;
console.log("blob", blob)
let oFileReader = new FileReader();
oFileReader.onloadend = function (e) {
let base64 = e.target.result;
console.log("打印出来看看", base64)
};
oFileReader.readAsDataURL(blob); //为了在页面显示图片，可以删除
var img = document.createElement("img");
img.onload = function (e) {
window.URL.revokeObjectURL(img.src); // 清除释放
};
let src = window.URL.createObjectURL(blob); img.src = src
document.getElementById("container1").appendChild(img);
}
}
xhr.send();
} </script>
</body> </html>
方式二：canvas.toDataURL()方法
实现原理：
- 使用canvas.toDataURL()方法
- 需要解决图片跨域问题 image.crossOrigin = '';
- 使用了Jquery库的$.Deferred()方法
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 图片转base64方式</title>
</head> <body>
<p id="container2"></p>
<script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
let imgSrc = "https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg"; //width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
function getBase64Image(img, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width ? width : img.width;
canvas.height = height ? height : img.height; var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
return dataURL;
}
function getCanvasBase64(img) {
var image = new Image();
image.crossOrigin = '';
image.src = img;
var deferred = $.Deferred();
if (img) {
image.onload = function () {
deferred.resolve(getBase64Image(image));//将base64传给done上传处理
document.getElementById("container2").appendChild(image);
}
return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
}
}
getCanvasBase64(imgSrc)
.then(function (base64) {
console.log("看看结果",base64);
}, function (err) {
console.log(err);
});
</script>
</body> </html>
3、前端调用接口返回200，后端有返回，但是控制台Network Response为空，没展示任何信息。
解决办法：
1、在js里面debugger，可以看到后台是否有返回数据。
2、直接console.log(),直接把返回值打印出来，查看返回的数据格式，方便前端进行数据的处理。
因为后端返回的数据较多，而且数据格式复杂，所以可能是Chrome的Response对数据长度或者大小进行对有控制，所以导致没显示。
另外发现一个控制台错误提示，Uncaught SyntaxError:Invalid shorthand property initializer
原因data中的一个属性冒号写成了“=”
解决：把等号改成冒号；
写在最后～
不断的填坑升级打怪，总有一天你的路会平坦。我们大家都加油！
## H5 canvas画图白板踩坑的更多相关文章
- h5 canvas 画图
h5 canvas 画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- html2canvas截屏在H5微信移动端踩坑，ios和安卓均可显示
1.最近在做移动端开发,框架是vue,一产品需求是,后台返回数据,通过qrcode.js(代码比较简单,百度上已经很多了)生成二维码,然后通过html2canvas,将html元素转化为canvas, ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- 移动H5页面微信支付踩坑之旅（微信支付、单页面路由模拟、按钮加锁、轮询等常见功能）
开发背景: .net混合开发的vue模板语法的单页面应用,所以不存在脚手架以及没有路由可以跳转. 项目描述: 需要写两个页面,在订单详情页需要点击“请输入手机号”进入手机号绑定页面,手机号绑定成功后自 ...
- canvas 踩坑记录
一.绘制一个带有多张图片和文字的canvas.要求将一张矩形的图片,放置进去显示为圆角矩形的图片 解决方案,先把图片处理成圆角矩形的样子,再放进去就可以了 绘制圆角矩形图片的解决方案 效果如下图 &l ...
- Taro 开发踩坑指南 (小程序，H5, RN)
Taro 开发踩坑指南 (小程序,H5, RN) css taro 如何展示多行文本省略号 https://www.cnblogs.com/xgqfrms/p/12569057.html UI 设计稿 ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- html2canvas以及domtoimage的使用踩坑总结
前言 首先做个自我介绍,我是成都某企业的一名刚刚入行约一年的前端,在之前的开发过程中,遇到了问题,也解决了问题,但是在下一次解决相同问题的时候,只对这个问题有一丝丝的印象,还需要从新去查找,于是,我注 ...
- 【踩坑记】从HybridApp到ReactNative
前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...
随机推荐
- hue搭建
1.安装依赖: sudo yum -y install gcc-c++ asciidoc cyrus-sasl-devel cyrus-sasl-gssapi krb5-devel libxml2-d ...
- LFU C# 实现
周六早上 做了下力扣的LRU 题目 后面接着看了LFU 缓存 难度提高了不少 首先 先说下 这2着 的差别把 LRU :最近 最少使用算法(Least Recently Used).LRU 是 ...
- Vulnhb 靶场系列：Jarbas1.0
靶场镜像 官网 信息收集 攻击机kali IP地址 通过nmap 进行主机发现,发现目标机IP地址 nmap -sP 192.168.227.1/24 参数说明: -sP (Ping扫描) 该选项告诉 ...
- LabVIEW（数据库自动编号）
数据库如果字段是自动编号,则在插入数据时,可以不考虑.
- 内容安全策略（CSP）详解
1.背景 1.1.同源策略 网站的安全模式源于"同源策略",web浏览器允许第一个web页面中的脚本访问页面中的数据,但前提是两个web页面具有相同的源.此策略防止一个页面的恶意脚 ...
- 09JAVA基础-常用类
1.Scanner //获取键盘输入 Scanner sc = new Scanner(System.in); int num = sc.nextIn(); String str = sc.nextL ...
- supersqli
0x01 堆叠注入 1.定义与说明 在sql中,分号(;)表示一条sql语句的结束.在;结束之后继续构造下一条语句,会一起执行,因此为堆叠注入. union联合查询是将两条语句合并之后进行查询,uni ...
- .Net Core3.0 WebApi 项目框架搭建 二:API 文档神器 Swagger
.Net Core3.0 WebApi 项目框架搭建:目录 为什么使用Swagger 随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染.后端分离的形态,而且前端技术和后端技 ...
- 我的.vimrc配置
termux平台下,通过pkg update && pkg upgrade && pkg install vim来获得vim.可是,当我配置.vimrc时发现如果我每在 ...
- php的 mysqlnd驱动
这篇文章写的好 http://blog.linuxeye.com/395.html 传统编译php的时候需要指定mysql 的参数 --with-mysql=/usr/local/mysql \ -- ...