实现微信H5实现网页长按保存图片及识别二维码
使用工具
html2canvas 官方文档
canvas2image
实施方案
- 将DOM 使用html2canvas转化成cavas对象 再将cavas对象使用canvas2image(封装toDataUR方法L)转化为png、jpeg等格式
操作步骤
1.引入html2canvas.js canvas2image.js
- 可通script标签引入
webpack引入（vue react）
npm install --save html2canvas
或
yarn add html2canvas
// 目前我安装的版本 package.json中显示的
// html2canvas": "^1.0.0-alpha.12",
npm install --save canvas2image
// "canvas2image": "^1.0.5",
网上大多中文教程版本与官方版本不一致，写法也有出入，最好在实际使用时查看官方文档
npm 安装成功后还在需要使用的vue组件中用import引入
import html2canvas from 'html2canvas';
import Canvas2Image from 'canvas2image';
// 并且在components中声名
export default {
data(){
return{
}
},
components: {
Canvas2Image,
html2canvas
},
}
我这直接使用import引入Canvas2Image 可能会报错需修改源码
./node_moduler/canvas2image/canvas2image.js
在最后一行加入export default Canvas2Image;
var Canvas2Image = function (){
...
}
export default Canvas2Image;
接下来就可以安排上了
first第一步 html 转为 canvas
选中dom对象（记住是dom对象非jquery对象）
jquery对象转dom对象方法
document.getElementById (“id”)获取的是dom对象
alert(document.getElementById(“div”))得到的是[object HTMLDivElement]
$(“#id”)获取jquery对象
alert($(“#div”))得到的是[object Object]
jquery对象可通过 得到dom对象
var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
var v=$v.get(0);
基于html2canvas.js可将一个元素渲染为canvas，只需要简单的调用html2canvas(element[, options]);即可。下列html2canvas方法会返回一个包含有<canvas>元素的promise：
html2canvas(document.body).then(function(canvas) {
document.body.appendChild(canvas);
// 把body内包含的内容全部转化为canvas
});
第二部把canvas对象转化为image对象 并且使用dom操作把img标签插入即可
清晰度解决方案
将canvas对象的属性width和height属性放大为2倍，最后将canvas的CSS样式width和height设置为原先正常的大小。
全部操作代码
convert2canvas() {
// 获取需要转化的dom对象 直接使用$('.wrap')选取的为jquery对象 无法继续操作
var cntElem = $('.wrap')[0];
var shareContent = cntElem; //需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
//放大后再缩小提高清晰度
canvas.getContext("2d").scale(scale, scale);
console.log(width)
console.log(height)
// 设置html2canvas方法的配置
var opts = {
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// allowTaint: true, //允许画布上有跨域图片 不建议使用 后面详细补充
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true // 【重要】开启跨域配置
};
// 开始转化为canvs对象
html2canvas(shareContent, opts).then(function(canvas) {
var context = canvas.getContext('2d');
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// 【重要】默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
//转化后放哪 最好放在与 .wrap 父级下
var detail = document.getElementsByName(".wrap");
detail.appendChild(img);
// 最后设置img标签为正常高度宽度 提高清晰度
$(img).css({
"width": canvas.width / 2 + "px",
"height": canvas.height / 2 + "px",
}).addClass('f-full');
});
}
注意事项
移动端截屏 只截取到浏览器当前显示的画面即一屏高度
可能原因
- 截取组件设置高度为height:100%;
- 如若在截取的div中使用background-image：url() 设置背景图请使用img标签设置背景把需截取的dom撑开
如下结构设置
.main{
height: auto;
width: 100%;
}
img{
width:100%;
}
<div class="main"><img><div>
含有跨域图片（如微信头像等）
如直接使用微信头像url 放入img标签中 设置html2canvas useCORS 可污染画布 allowTaint: true 虽然可转成画布 但是 cavas通过Canvas2Image 或者 toDataURL 是无法无法转化成base64 图片的
解决方法通过
- 服务端的代理转发(forward)实现
- nginx 反向代理
如果对跨域这个问题有深究的可以查看
或者 这篇文章
图片加载完成后执行截图
img 标签 有 onload 属性 把方法绑定在onload上即可（vue中 @load）
js生成二维码图片
(vue) 使用qrcodejs2
npm install qrcodejs2 --save
页面中引入
import QRCode from 'qrcodejs2'
components: {QRCode}
页面填充
<div id="qrcode" ref="qrcode"></div>
页面调用
qrcode () {
let qrcode = new QRCode('qrcode', {
width: 232, // 设置宽度
height: 232, // 设置高度
text: 'https://baidu.com'
})
},
/*
@ 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null
*/
this.$nextTick (function () {
this.qrcode();
})
