Vue3 + vue-web-screen-shot 前端实现页面截图64编码转图片文件上传

3 篇文章 0 订阅

最近项目遇到的要求是弹出框上传文件,需要用到页面截图,由于使用的是Vue3的框架于是选择用vue-web-screen-shot组件进行操作。(由于插件是Vue3编写的,所以只适用于Vue3的项目,如果是Vue2的项目,截图组件可以使用js-web-screen-shot)

需要实现的效果如下:

 点击截图后弹窗消失,用户可随意在页面中截图等操作

 确认后在弹窗中显示截图列表,上传表格

整个操作步骤实现如下:

  • 在项目中添加vue-web-screen-shot组件
  • 在项目入口文件中导入组件
  • 在需要使用的页面使用组件
  • 在页面截图后使用获得的64编码转为图片文件形式进行上传

1.在项目中添加vue-web-screen-shot组件

//使用以下代码添加插件

yarn add vue-web-screen-shot

# or

npm install vue-web-screen-shot --save

2.在main.js中导入组件

// 导入截屏插件
import screenShort from "vue-web-screen-shot";
const app = createApp(App);
// 使用截屏插件
app.use(screenShort, { enableWebRtc: false })

3.在需要的页面导入截图组件

<template>
    
    <div v-show="showScreenShort">
        
        <el-dialog>

           //省略弹框其他部分
           ...
             <el-button @click="jietu">快捷截图</el-button>
        </el-dialog>
    </div>

    //直接使用组件即可,不用在该页面继续添加
    <screen-short
    v-if="screenshotStatus"
    @get-image-data="getImg"
    @destroy-component="destroyComponent"
      >
    </screen-short>
</template>

如果将screen-short组件放在弹出框内部,则隐藏弹出框时会连同截屏组件一起隐藏,所以建议放在外部,并给dialog弹出框单独加一个div,用showScreenShort控制弹出框显示和隐藏

参数说明

如示例代码所示,在template中直接使用screen-short插件,绑定组件需要的事件处理函数即可。

接下来就跟大家讲下组件中每个属性的意义:

  • screenshotStatus 用于控制组件是否出现在dom中
  • @destroy-component 用于接收截图组件传递的销毁消息,我们需要在对应的函数中销毁截图组件
  • @get-image-data 用于接收截图组件传递的框选区域的base64图片信息,我们需要为他提供一个函数来接收截图组件传递的消息

可选参数

截图插件有一个可选参数,它接受一个对象,对象每个key的作用如下:

  • enableWebRtc 是否启用webrtc,值为boolean类型,值为false则使用html2canvas来截图
  • level 截图容器层级,值为number类型。
  • clickCutFullScreen 单击截全屏启用状态,值为boolean类型, 默认为false
  • hiddenToolIco 需要隐藏的截图工具栏图标,值为{ save?: boolean; undo?: boolean; confirm?: boolean }类型,默认为{}。传你需要隐藏的图标名称,将值设为true即可。
  • enableCORS html2canvas截图模式下跨域的启用状态,值为boolean类型,默认为false
  • proxyAddress html2canvas截图模式下的图片服务器代理地址,值为string类型,默认为undefined

 截图功能实现代码如下:

<script>

function jietu() {
  showScreenShort.value = false;//隐藏弹框
  screenshotStatus.value = true;//显示截图插件
}

//截图按了√以后生成64编码
async function getImg(base64) {
  var image = new Image();
  image.src = base64;
  image.onload = () => {
    var canvas = convertImageToCanvas(image);
    var url = canvas.toDataURL('image/jpeg');
    var name = guid();
    uploadlist.value.push({ image: url, name: name });
  };
//截图完成后显示弹框
  showScreenShort.value = true;
}

//生成文件唯一编码作为name 方便后续删除图片时查找对象
function guid() {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
}

//取消截图 显示弹窗 隐藏截图插件
function destroyComponent() {
  screenshotStatus.value = false;
  showScreenShort.value = true;
}
</script>

接下来制作截图的列表框,循环的是js代码中64编码uploadlist表,由于用户可能需要对图片进行查看、删除等操作,加入点击事件

//在之前的弹窗快捷截图后边
 <div v-if="uploadlist.length > 0" class="imglist">
    <div v-for="(item, index) in uploadlist" class="picBox">
                    <img
                      :src="item.image"
                      title="点击查看大图"
                      alt="item.name"
                      @click="handlePictureCardPreview(item.image)"/>
        <span style="float: right">
        <i class="iconfont icon-guanbi" @click="deleteImg(item.name)"></i>
        </span>
    </div>
</div>
//查看大图也是一个弹出框的形式

 <el-dialog v-model="dialogVisible" class="dialogSmall">
        <template #header>
          <div class="dialogHeader">
            <div>查看大图</div>
          </div>
        </template>
        <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%" />
      </el-dialog>
//涉及语法
// 查看图片大图
<script>
function handlePictureCardPreview(url) {
  dialogImageUrl.value = url;
  dialogVisible.value = true;
}
</script>

删除截图代码: 

function deleteImg(name) {
  console.log(name);
  uploadlist.value.forEach((value, index, array) => {
    if (name == value.name) {
      array.splice(index, 1);
    }
  });
}

4.确定上传时将64编码转成文件形式上传

因为之前可能会涉及到文件的删除,所以考虑在最后上传的时候再将所有的截图64编码进行数据转换。

async function submitForm(formEl) {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
//上述是绑定了表格验证

//下面开始上传文件
      let formData = new FormData();
      formData.append('description', servicesForm.value['description']);

//这里是关于截图部分的64base转码
      if (uploadlist.value.length > 0) {
        uploadlist.value.forEach((e) => {
          //通过atob将base64进行编码
          var bytes = window.atob(e.image.split(',')[1]); 
          //处理异常,将ASCII码小于0的转换为大于0,进行二进制转换
          var buffer = new ArrayBuffer(bytes.length);
          //生成一个8位数的数组
          var uint = new Uint8Array(buffer); 
           //根据长度返回相对应的Unicode 编码
          for (var i = 0; i < bytes.length; i++) {
            uint[i] = bytes.charCodeAt(i); 
          }
          //Blob对象,type为图片的格式
          var imageFile = new Blob([buffer], { type: 'image/jpeg' }); 

           //最后将转换的文件放入要上传的数组中
          imageFilelist.push(imageFile);
        });
        
        //将已转换好的文件进行上传
        for (var i = 0; i < imageFilelist.length; i++) {
          formData.append('picFiles', imageFilelist[i], guid() + '.jpg');
        }
      }
     //上传接口,上传formData数据,关闭弹出框
      addFeedback(formData).then((data) => {
        closeDialog();
        emit('updateData', '');
      });
    }
  });
}

以上。

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用 vue-simple-uploader 插件来实现 Vue3 中的大文件上传功能。下面是一个简单的示例代码: 首先,安装 vue-simple-uploader 插件: ```bash npm install vue-simple-uploader --save ``` 然后,在需要使用上传功能的组件中引入插件并配置: ```javascript import Vue from 'vue'; import VueSimpleUploader from 'vue-simple-uploader'; Vue.use(VueSimpleUploader, { chunkSize: 1024 * 1024, // 设置分片大小,默认为1MB concurrentUploads: 3, // 设置并发上传数,默认为3 retryCount: 3, // 设置上传重试次数,默认为0 }); export default { // ... } ``` 接下来,你可以在组件中使用 `<vue-simple-uploader>` 标签来实现文件上传: ```html <template> <div> <vue-simple-uploader ref="uploader" :url="uploadUrl" @file-added="handleFileAdded" @file-progress="handleFileProgress" @file-success="handleFileSuccess" @file-error="handleFileError" @upload-started="handleUploadStarted" @upload-completed="handleUploadCompleted" > <button @click="startUpload">开始上传</button> </vue-simple-uploader> </div> </template> <script> export default { data() { return { uploadUrl: 'http://your-upload-url', // 设置上传接口地址 }; }, methods: { handleFileAdded(file) { console.log('文件添加成功:', file); }, handleFileProgress(file, progress) { console.log('上传进度:', progress); }, handleFileSuccess(file, response) { console.log('上传成功:', response); }, handleFileError(file, error) { console.log('上传失败:', error); }, handleUploadStarted() { console.log('上传开始'); }, handleUploadCompleted() { console.log('上传完成'); }, startUpload() { this.$refs.uploader.upload(); // 调用上传方法 }, }, }; </script> ``` 以上代码是一个简单的大文件上传示例,你可以根据需要自定义处理文件上传的各个事件。参考文档和示例代码以便更好地理解和使用 vue-simple-uploader 插件:https://github.com/simple-uploader/vue-simple-uploader

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值