Vue实战中遇到的常见的问题总结(四)---关于html2canvas

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

html2canvas

需求：本次需求中需要涉及将输入的特殊公式等转化为图片并储存进数据库。 那么，分为两步：一步是将特殊字符转化为图片；一步是将图片上传给后台。 将网页中的内容进行截图，可使用插件html2canvas实现。
首先，关注html2canvas官网：html2canvas.hertzen.com/getting-sta…

首先下载并引入

npm install html2canvas
import html2canvas from 'html2canvas'

使用

关于html2canvas的使用，有以下两种方式

• 使用html2canvas(需要截图的元素).then(function(){})的方式向body中添加图片

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

• 通过配置html2canvas配置configuration的方式 ： html2canvas(元素，{属性：属性值}) ，具体的配置可参见文档html2canvas.hertzen.com/configurati…。 如：

  html2canvas(dom, {
          canvas,
          allowTaint: false,
          useCORS: true
        });
  

实际开发过程demo如下:

async () => {
      const dom: any = document.getElementById("jme-math-content");
      const box: any = window.getComputedStyle(dom);
      const width = parseInt(box.width, 10);
      const height = parseInt(box.height, 10);
      const scaleBy = 1;
      const canvas: any = document.createElement("canvas");
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy;
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;
      // 获取画笔
      const context = canvas.getContext("2d");
      context.scale(scaleBy, scaleBy);
      await html2canvas(dom, {
        canvas,
        allowTaint: false,
        useCORS: true
      });
      const res: any = await fileDataFn(canvas, 0, "image/jpeg");
      const file = res.file;
      const fileExt = "jpg";
      const { code = "000", data = {} } =
        (await uploadFileOfOSS({ file, datas: { fileExt } })) || {};
      if (code == "999") {
        ……  //上传文件业务代码
      } else {
       ……
      }
    }

Vue-Cli3.0打包时去掉console打印信息

在进行项目开发时，经常需要打印console.log进行打印某些信息。但是在生产环境下，如何做到一键配置不打印我们的调试信息呢。以下就是解决办法：
首先安装插件 babel-plugin-transform-remove-console
npm install babel-plugin-transform-remove-console --save
接下来修改babel.config.js。如果没有的话可以自己创建。
首先判断是否在生产环境下(见下一模块)，则引入移除console的插件。

const prodPlugins = process.env.NODE_ENV === 'production' ? ['transform-remove-console'] : []
module.exports = {
  plugins: [
    ...prodPlugins
  ]
}

关于如何配置生产环境和本地测试环境

比较简单，如下图，新建.env.development和.env.production两个文件在根目录下以区分生产和测试环境。 配置如下：\

.env.development配置如下：
NODE_ENV='development' VUE_APP_BASE_API = 'http://xxx:xxx'
.env.production配置如下：
NODE_ENV='production' VUE_APP_BASE_API = 'http://xxx:xxx'
那么在使用过程中：
process.env.NODE_ENV === 'production'判断是否为生产环境即可。