首页 > 上网技巧 > 电脑小技巧 > 实现微信H5实现网页长按保存图片及识别二维码

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

时间:2019-02-27 16:08 作者:QQ地带 我要评论

 
使用工具
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 反向代理
 
如果对跨域这个问题有深究的可以查看
canvas drawImage()方法
或者 这篇文章
图片加载完成后执行截图
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();
})
复制代码如果添加二维码成功 长按无识别二维码选项 请把二维码设置的长宽放大
 

标签: 微信
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告