微信H5实现网页长按保存图片及识别二维码

实现微信H5实现网页长按保存图片及识别二维码

使用工具

html2canvas 官方文档

html2canvas.hertzen.com/

canvas2image

github.com/hongru/canv…

实施方案

• 将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方法会返回一个包含有元素的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%;
}

"main">

复制代码

含有跨域图片（如微信头像等）

如直接使用微信头像url 放入img标签中 设置html2canvas useCORS 可污染画布 allowTaint: true 虽然可转成画布 但是 cavas通过Canvas2Image 或者 toDataURL 是无法无法转化成base64 图片的

解决方法通过

• 服务端的代理转发(forward)实现
• nginx 反向代理

如果对跨域这个问题有深究的可以查看

canvas drawImage()方法

或者 这篇文章

图片加载完成后执行截图

img 标签 有 onload 属性 把方法绑定在onload上即可（vue中 @load）

js生成二维码图片

(vue) 使用qrcodejs2

npm install qrcodejs2 --save
复制代码

页面中引入

import QRCode from 'qrcodejs2'

components: {QRCode}
复制代码

页面填充

"qrcode" ref="qrcode">
复制代码

页面调用

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();
})
复制代码

如果添加二维码成功 长按无识别二维码选项 请把二维码设置的长宽放大

转载于:https://juejin.im/post/5b7982556fb9a019d9245cf1