vue页面使用mint-ui html2canvas 手机电脑点击保存 手动长按保存图片

Java小白修炼手册

1. 初始化VUE工程

2. 安装依赖

 npm install --save html2canvasforios13 mint-ui
//遇到依赖找不到的情况 可以换淘宝源

//使用阿里定制的 cnpm 命令行工具代替默认的 npm，输入下面代码进行安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org
//检测cnpm版本，如果安装成功可以看到cnpm的基本信息。
cnpm -v
//以后安装插件只需要使用cnpm intall即可

3. main.js 引入

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI);

import '@/assets/css/main.css'
import '@/assets/css/reset.css'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4. 配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/certificate',
      name: 'Certificate',
      component: () => import('../components/Certificate.vue')
    },
  ]
})

5. 写页面代码

<template>
  <div class="certificate">
    <div class="mask">
      <div class="content" id="imageWrapper" ref="imageWrapper">
        <template v-if="pageLogging">
          <img src="@/assets/images/img_certificate.png" />
          <div class="main">
            <!-- <h3>证书编码：{{certificateNumber}}</h3> -->
            <h3>证书编码：66666666666</h3>
            <!-- <div class="name" >{{userName}}</div> -->
            <div class="name" >秃顶美男子</div>
            <p>
              感谢您为【秃顶美男子植发行动计划】成功捐赠了
              <!-- <span>{{integral}}RMB。</span> -->
              <span>666  RMB。</span>
            </p>
            <p>感谢您，让世界更温暖。</p>
            <div class="stamp">
              <em>优秀优秀优秀的秃顶美男子大型基地</em>
              <!-- <em>{{createTime}}</em> -->
              <em>20200611</em>
              <img src="@/assets/images/2020061118404860.png" />
            </div>
          </div>

          <div class="button" @click="makeImg()">保存证书</div>
          <!-- <div class="button" @click="makeChange()">点我变变变</div> -->
        </template>
        <template v-if="!pageLogging">
          <img :src="dataURL" />
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { Indicator, Toast } from "mint-ui";
import html2canvas from "html2canvasforios13";
export default {
  name: "Certificate",
  data() {
    return {
      userName: "  ",
      certificateNumber: "",
      integral: 0,
      createTime: "",
      pageLogging: true,
      dataURL: "",
      // list: [
      //   {
      //     certificateNumber: "1111",
      //     userName: "1111",
      //     integral: "1111"
      //   },
      //   {
      //     certificateNumber: "2222",
      //     userName: "2222",
      //     integral: "2222"
      //   },
      //   {
      //     certificateNumber: "3333",
      //     userName: "3333",
      //     integral: "3333"
      //   }
      // ]
    };
  },
  created() {
    this.userName = "1";
    this.certificateNumber = this.$route.query.certificateNumber;
    this.integral = this.$route.query.integral;
    this.createTime = this.$route.query.createTime;
    // if (this.userName != "") {
      this.showName = true;
    // } else {
      // this.showName = false;
    // }
    // this.makeImg()
  },
  methods: {
    makeImg() {
      let that = this;
      // 获取想要转换的 DOM 节点
      let dom = document.querySelector("#imageWrapper");
      let box = window.getComputedStyle(dom);
      // DOM 节点计算后宽高
      let width = parseInt(box.width, 10);
      let height = parseInt(box.height, 10);

      let opts = {
        //canvas: canvas,
        logging: true, // 启用日志记录以进行调试 (发现加上对去白边有帮助)
        allowTaint: true, // 否允许跨源图像污染画布
        backgroundColor: null, // 解决生成的图片有白边
        useCORS: true // 如果截图的内容里有图片,解决文件跨域问
      };
      html2canvas(dom, opts).then(canvas => {
        var url = canvas.toDataURL("image/png");
        console.log(url);
        that.dataURL = url;
        that.pageLogging = false;
        Indicator.close();
      });
    },
    makeChange(){
    }
  }
};
</script>

<style>
</style>

6. 可以启动项目跑起来了~
   
   点击保存证书 生成图片
   按住就可以另存为。（手机端为保存）
   ps 生成印章 网址（https://www.zhaoxi.net/make/13961/）