Vue+Element实现页面生成快照截图

<template>
  <div ref="homePage" class="home-container rel">
    <div class="snap-box abs">
      <div title="页面快照" class="z-pointer" @click="newSnapShot()">
        <img :src="snapCamera" alt="快照生成">
      </div>
    </div>
    <el-image-viewer
      v-if="imgUrl"
      :on-close="()=>{imgUrl=''}"
      :url-list="[imgUrl]" />
  </div>
</template>

/**
 * 图片blob转图片base64
 * @param blob
 */
export const blobToBase64 = (blob) => {
	return new Promise((resolve, reject) => {
		const fileReader = new FileReader();
		fileReader.onload = (e) => {
			resolve(e.target.result);
		};
		// readAsDataURL
		fileReader.readAsDataURL(blob);
		fileReader.onerror = () => {
			reject(new Error('blobToBase64 error'));
		};
	});
}
 
 
 
import html2canvas from 'html2canvas';
import { blobToBase64 } from '@/utils/helper.js';
 
 
export default {
  name: 'Home',
  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer'),
  },
  data() {
    return {
      tooltipRemark,
      loading: false,
      imgUrl: '',
    };
  },
  methods: {
    // 生成快照
    newSnapShot() {
      this.loading = true;
      const { ClipboardItem } = window;
      html2canvas(this.$refs.homePage).then((canvas) => {
        // 将canvas转为blob对象
        canvas.toBlob(async (blob) => {
          if (typeof (navigator.clipboard) === 'undefined' && !ClipboardItem) {
            await blobToBase64(blob).then((res) => {
              this.imgUrl = res;
              this.$message({
                message: '快照生成成功',
                type: 'success',
                duration: 2000,
              });
            }).catch(() => {
              this.$message({
                message: '快照生成失败',
                type: 'warning',
                duration: 2000,
              });
            }).finally(() => {
              this.loading = false;
            });
            return;
          }
          // 将blob对象放入剪切板item中
          // eslint-disable-next-line no-undef
          const data = [new ClipboardItem({ [blob.type]: blob })];
          // 写入剪切板,成功会执行resolve,失败则走reject
          await navigator.clipboard.write(data).then(() => {
            this.$message({
              message: '已保存到粘贴板',
              type: 'success',
              duration: 2000,
            });
            this.loading = false;
          }, () => {
            this.$message({
              message: '保存截图失败',
              type: 'warning',
              duration: 2000,
            });
            this.loading = false;
          });
        }, 'image/png');
      }).catch(() => {
        this.loading = false;
      });
    },
  },
};

yarn add vue-cropper -S

import vueCropper from 'vue-cropper' // 截图插件
Vue.use(vueCropper)

<template>
  <div>
    <el-upload
      ref="upload"
      list-type="picture-card"
      :action="upurl"
      :data="updataData"
      :headers="uploadHeader"
      :on-change="changeUpload"
      :auto-upload="false"
      :show-file-list="false"
    >
      <img v-if="inputForm.pic" :src="inputForm.pic" class="avatar upimg" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <!-- vueCropper 剪裁图片实现-->
    <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body>
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :fixedBox="option.fixedBox"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { uploadPictureBase64 } from "../api/upimg";
// import local from "@/utils/local";

export default {
  props:{
    title:{
      type:String,
    }
  },
  data() {
    return {
      upurl: "boxes-manage/file/uploadPictureBase64",
      inputForm: {
        pic: "",
      },
      dialogVisible: false,
      uploadHeader: { Authorization: "" },
      updataData: {
        file: "",
        fileType: "",
      }, //上传参数
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 400, // 默认生成截图框宽度
        autoCropHeight: 400, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
    };
  },
  methods: {
    // 上传按钮   限制图片大小 -----------------------------------------------------------
    changeUpload(file) {
      let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isJPG = testmsg === "jpg";
      const isPNG = testmsg === "png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");
        return;
      }
      this.$nextTick(() => {
        this.option.img = file.url;
        this.dialogVisible = true;
      });
    },

    // 点击裁剪
    async finish() {
      await this.$refs.cropper.getCropData((data) => {
        let newdataff=data.split(";")[1].split(",")[1]
        this.updataData.file = this.base64toFile(data).name;
        this.updataData.fileType = this.base64toFile(data).name.split(".")[1];
        uploadPictureBase64({
          pictureBase64: newdataff,
          fileName: this.updataData.file,
          fileType: this.updataData.fileType,
        }).then((res) => {
          console.log(res);
          if (res.code == "0000") {
            this.$message({
              message: "上传图片成功",
              type: "success",
            });
            this.dialogVisible = false;  // 隐藏蒙城
            this.$emit("childFn", res.data);  // 与父组件进行交互
            this.inputForm.pic = res.data;  // 将返回的图片替换在页面上
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },

    base64toFile(dataurl, filename = new Date().getTime()) {
      let arr = dataurl.split(",");
      let mime = arr[0].match(/:(.*?);/)[1];
      let suffix = mime.split("/")[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime,
      });
    },
  },
};
</script>
<style scoped>
/* 截图 */
.cropper {
  width: auto;
  height: 300px;
}
.upimg {
  height: 146px;
  width: 146px;
}
</style>

import Cropperimg from "../components/vueCropperimg.vue";

  components: {
    Cropperimg,
  },

 <Cropperimg title="商品图片裁剪" @childFn="parentFn" />

parentFn(res) {
  console.log(res);
},