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

2018-08-01 本文已影响8258人査辰昊

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

使用工具

html2canvas 官方文档

https://html2canvas.hertzen.com/

canvas2image

https://github.com/hongru/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对象不懂的自行百度）

基于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）

转载请标明出处

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