【非常好用的吧页面生成图片的插件html2canvas】

---

前言

实现的功能如下：把当前页面的内容生成一张图片，然后保存在本地。这里移动端采用长按保存的方式，兼容性更好，适用于各种浏览器。

---

一、html2canvas是什么？

html2canvas 是一个 HTML 渲染器。该脚本允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”，屏幕截图是基于 DOM，因此生成的图片并不一定 100% 一致，因为它没有制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

二、使用步骤

1.下载插件

下载插件

npm i html2canvas

2.引入库

代码如下（示例）：main.js种全局注册

import html2canvas from "html2canvas";
Vue.prototype.$html2canvas = html2canvas;

3.在组件中使用

这里对移动端的PC端做了不同的下载方式,移动端使用了长按保存,PC端使用打开图片链接直接下载,实现更好用户体验.
代码如下:

<van-popup class="share-img-popup-div" v-model="shareImgShow">
 <div class="share-img-content-div">
    <div class="save-img-url-div">
      <img :src="saveImgUrl" alt="">
    </div>
    <div class="share-img-popup-tips" style="color: #fff;">*长按保存图片</div>
  </div>
</van-popup>

import { isIpadFun, isMobileDevice } from "../common/utils";

...
data() {
    return {
    	shareImgShow: false,
      	saveImgUrl: ""
    }
},
methods: {
	getCapture() {
      // 生成了canvas，直接下载
      const app = document.getElementById("app");
      this.$html2canvas(app, {
        allowTaint: true,  //开启跨域
        useCORS: true,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        width: app.offsetWidth,
        height: app.offsetHeight,
        x: 0,
        y: 0,
      }).then(canvas => {
        this.$nextTick(() => {
          //下载图片的功能。
          const fileName = "DivergenceValueSimulator"
          let that = this;
          canvas.toBlob(function (blob) {
            // 字符内容转变成blob地址
            const objectUrl = URL.createObjectURL(blob);
            const objectUrl1 = canvas.toDataURL('image/jpeg');

            if (isMobileDevice() || isIpadFun()) {
              // Toast("请长按保存图片");
              // 通过长按保存
              that.saveImgUrl = objectUrl1;
              that.shareImgShow = true;
            } else {
              const eleLink = document.createElement('a');
              eleLink.href = objectUrl;
              eleLink.style.display = 'none';
              eleLink.download = fileName;
              // 触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
              // 释放缓存
              URL.revokeObjectURL(objectUrl);
            };
          },'image/png', 1);
        });
      });
    },
}
...

下面是utils.js
isIpadFun方法用来判断是否是ipad,isMobileDevice方法判断是否是手机.两个方法一起使用来判断是否是移动端.

export const isIpadFun = function() {
  var ua = window.navigator.userAgent
  var IsIPad = false
  if (/ipad/i.test(ua)) {
    IsIPad = true
  }
  // iPad from IOS13
  var macApp = ua.match(/Macintosh/i) != null
  if (macApp) {
    // need to distinguish between Macbook and iPad
    var canvas = document.createElement('canvas')
    if (canvas != null) {
      var context =
        canvas.getContext('webgl') || canvas.getContext('experimental-webgl')
      if (context) {
        var info = context.getExtension('WEBGL_debug_renderer_info')
        if (info) {
          var renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL)
          if (renderer.indexOf('Apple') != -1) IsIPad = true
        }
      }
    }
  }
  return IsIPad;
}
export const  isMobileDevice = function() {
  return navigator.userAgent.match(
    /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
  );
}

export default {
  isIpadFun,
  isMobileDevice, 
}

总结

如有问题请评论留言