使用npm包js-web-screen-shot做网页截图，可以对截图加文字，箭头等等，类似于微信截图

阅读本书更多章节>>>>

<template>  <div class="m-feedback-wrap" :style="{ top: `${feedbackHeight}px` }">    <div class="m-feedback-icon-wrap">      <el-tooltip        class="item"        effect="dark"        content="内容"        placement="left-end"      >        <span          :class="[`icon iconfont icon-xiaoxi m-feedback-icon`]"          @click="handleOpen"          @mousedown="handleFeedbackDrag"        ></span>      </el-tooltip>    </div>    <el-dialog      title="标题"      :visible.sync="visible"      width="1000px"      append-to-body      class="m-dialog m-dialog-feedback"    >      <div>        <el-form ref="form" :model="form" :rules="rules" label-width="100px">          <div class="m-feedback-row-wrap">            <el-row>              <el-col :span="24">                <el-form-item label="问题描述" prop="describe">                  <el-input type="textarea" :rows="5" v-model="form.describe" />                </el-form-item>              </el-col>            </el-row>            <el-row>              <el-col :span="24">                <el-form-item label="附件" prop="attachment">                  <el-upload                    class="upload-demo m-feedback-upload"                    action="https://jsonplaceholder.typicode.com/posts/"                    :on-preview="handlePreview"                    :on-remove="handleRemove"                    :before-remove="beforeRemove"                    multiple                    :on-exceed="handleExceed"                    :file-list="fileList"                    list-type="picture"                  >                    <el-button size="small" type="primary">点击上传</el-button>                    <el-button                      size="small"                      type="primary"                      @click.stop="handleCapture2"                      >截图</el-button                    >                    <div slot="tip" class="el-upload__tip">                      只能上传jpg/png文件，且不超过5M                    </div>                  </el-upload>                </el-form-item>              </el-col>            </el-row>          </div>        </el-form>      </div>      <div slot="footer" class="dialog-footer">        <el-button type="primary" @click="handleSubmit">提交</el-button>        <el-button @click="handleClose">取消</el-button>      </div>    </el-dialog>  </div></template><script>import {  Button,  Tooltip,  Dialog,  Form,  Row,  Col,  FormItem,  Upload,  Link,  Input,} from 'element-ui'import html2canvas from 'html2canvas'import ScreenShot from 'js-web-screen-shot'import temp from './images/m-temp.jpg'// import temp from '../../../bizapp/m-biz.jpg'import temp2 from './images/m-temp2.jpg'import './font/iconfont.css'import './index.css'let defaultFileList = [  {    name: 'food.jpg',    url: temp,  },  {    name: 'food2.jpg',    url: temp2,  },]export default {  name: 'Feedback-Index',  data() {    return {      visible: false,      fileList: [...defaultFileList],      form: {},      // 表单校验      rules: {        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],      },      feedbackMouseY: 0,      feedbackDragging: false,      feedbackHeight: 200,    }  },  components: {    [Button.name]: Button,    [Tooltip.name]: Tooltip,    [Dialog.name]: Dialog,    [Form.name]: Form,    [Row.name]: Row,    [Col.name]: Col,    [FormItem.name]: FormItem,    [Upload.name]: Upload,    [Link.name]: Link,    [Input.name]: Input,  },  mounted() {    document.addEventListener('mousemove', this.handleMouseMove)    document.addEventListener('mouseup', this.handleMouseUp)  },  methods: {    handleCapture() {      html2canvas(document.body).then(function (canvas) {        document.body.appendChild(canvas)      })    },    convertBase64UrlToBlob(urlData) {      let bytes = window.atob(urlData.split(',')[1]) //去掉url的头，并转换为byte      //处理异常,将ascii码小于0的转换为大于0      let ab = new ArrayBuffer(bytes.length)      let ia = new Uint8Array(ab)      for (var i = 0; i < bytes.length; i++) {        ia[i] = bytes.charCodeAt(i)      }      return new Blob([ab], {        type: 'image/jpg',      })    },    async handleCapture2() {      this.visible = false      setTimeout(() => {        try {          new ScreenShot({            enableWebRtc: false,            completeCallback: this.callback,            triggerCallback: this.triggerCallback,          })        } catch (error) {          console.log(error)        }      }, 500)    },    callback(value) {      this.visible = true      console.log(value)      let file = this.convertBase64UrlToBlob(value.base64)      console.log(file)      this.fileList = [        ...this.fileList,        {          name: `${Date.now()}.png`,          //url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',          url: value.base64,        },      ]    },    triggerCallback() {      this.visible = false    },    handleSubmit() {      this.$refs['form'].validate((valid) => {        if (valid) {          console.log(this.form)          this.visible = false          this.$message({            message: '成功',            type: 'success',          })          this.$refs['form'].resetFields()          this.fileList = [...defaultFileList]        }      })    },    handleClose() {      this.visible = false      this.$refs['form'].clearValidate()      this.$refs['form'].resetFields()      this.fileList = [...defaultFileList]    },    handleOpen() {      this.visible = true    },    handleRemove(file, fileList) {      console.log(file, fileList)      this.fileList = [...fileList]    },    handlePreview(file) {      console.log(file)    },    handleExceed(files, fileList) {      this.$message.warning(        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${          files.length + fileList.length        } 个文件`      )    },    beforeRemove(file, fileList) {      return this.$confirm(`确定删除这张图片吗？`, '提示', {        type: 'warning',        customClass: 'm-confirm',      })    },    //#region 拖拽    handleMouseMove(event) {      if (this.feedbackDragging) {        event.preventDefault()        const deltaY = event.clientY - this.feedbackMouseY        this.feedbackMouseY = event.clientY        let tempFeedbackHeight = this.feedbackHeight + deltaY        if (tempFeedbackHeight < 0) {          tempFeedbackHeight = 0        } else if (tempFeedbackHeight > window.innerHeight - 30) {          tempFeedbackHeight = window.innerHeight - 30        }        this.feedbackHeight = tempFeedbackHeight      }    },    handleMouseUp() {      this.feedbackDragging = false    },    handleFeedbackDrag(event) {      this.feedbackDragging = true      this.feedbackMouseY = event.clientY    },    //#endregion  },}</script><style></style>

我开发的chatgpt项目：

https://chat.xutongbao.top

 

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-05/154598.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！