截图功能

• 官网

安装

npm install --save html2canvas

官网例子

import html2canvas from 'html2canvas';


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

注意点：

• 上传图片 oss 要设置跨域
• html2canvas(ele, { width: 375, useCORS: true, scale: 1 }) 也要设置跨域
• useCORS: true,

函数封装

import html2canvas from 'html2canvas'
import axios from 'axios'
function getCanvasBlob(canvas) {
  return new Promise((resolve) => {
    canvas.toBlob((blob) => {
      resolve(blob)
    })
  })
}
export async function uploadFile(
  file,
  url = '/utils/upload-img',
  fileName = 'screenshot.png'
) {
  const newFile = file instanceof File ? file : new File([file], fileName)
  const formData = new FormData()
  formData.append(newFile.name, newFile)
  const { data } = await axios.post(url, formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  return data
}
/*
  1. 截图
  2. transform canvas to blob
  3. upload blob to server
*/
export async function takeScreenshotAndUpload(ele, upload = false) {
  let data
  // get screenshot canvas
  const canvas = await html2canvas(ele, { width: 375, useCORS: true, scale: 1 })
  // transform canvas to blob
  const canvasBlob = await getCanvasBlob(canvas)
  if (canvasBlob && upload) {
    // upload blob to server
    data = await uploadFile(canvasBlob)
    // return data
  }
  return {
    canvas,
    canvasBlob,
    data
  }
}

返回3个函数， 第一个直接是canvas, 第3个是上传文件数据， 当传入参数 upload 为true 启动上传功能

• canvas
• canvasBlob,
• data

项目使用

<template>
  <div>
    <div class="" id="canvas-area">
      <h3>我是被截图的文字</h3>
      <el-image :src="src" class="photo"></el-image>
    </div>
    <div>
      <h2>截图结果</h2>
      <el-image :src="src1"></el-image>
    </div>
    <el-button @click="publishWork">截图</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { takeScreenshotAndUpload } from '@/hooks/takeScreenshotAndUpload.js'
const isPublishing = ref(false)
const src = ref(
  'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
)
const src1 = ref(null)
const publishWork = async (el) => {
  try {
    // 1 take screenshot and upload
    const el = document.getElementById('canvas-area')
    const resp = await takeScreenshotAndUpload(el)
    console.log(resp, 'resp')
    // await nextTick()
    src1.value = resp?.canvas.toDataURL()
    console.log(src1, 'src1')
  } catch (e) {
    console.error(e)
  } finally {
    isPublishing.value = false
  }
}
</script>

<style lang="scss" scoped>
.photo {
  width: 200px;
  height: 200px;
}
</style>