Vue+Element页面生成快照截图

页面部分:

html 复制代码
<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>

js代码部分:

javascript 复制代码
/**
 * 图片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;
      });
    },
  },
};
相关推荐
RaidenLiu9 分钟前
从 Provider 迈向 Riverpod 3:核心架构与迁移指南
前端·flutter
前端进阶者10 分钟前
electron-vite_18Less和Sass共用样式指定
前端
数字人直播12 分钟前
稳了!青否数字人分享3大精细化AI直播搭建方案!
前端·后端
江城开朗的豌豆15 分钟前
我在项目中这样处理useEffect依赖引用类型,同事直呼内行
前端·javascript·react.js
听风的码17 分钟前
Vue2封装Axios
开发语言·前端·javascript·vue.js
转转技术团队18 分钟前
前端安全防御策略
前端
掘金一周24 分钟前
被老板逼出来的“表格生成器”:一个前端的自救之路| 掘金一周 8.21
前端·人工智能·后端
白嫖叫上我27 分钟前
js如何循环HTMLCollection
javascript
cc_z30 分钟前
vue代码优化
前端·vue.js
卷卷卷土重来31 分钟前
C++单例模式
javascript·c++·单例模式