vue使用插件js-web-screen-shot完成局部截图并保存上传给后端

使用 js-web-screen-shot 插件完成屏幕局部截图带截图工具栏，然后将截取的图片上传给后端

第一步、先下载js-web-screen-shot插件

yarn add js-web-screen-shot
# or
npm install js-web-screen-shot --save

第二步、在vue页面引入import插件

import ScreenShort from "js-web-screen-shot";

第三步、在点击截图监听事件中实例化插件

var timer=setTimeout(()=>{const screenShotHandler = new ScreenShort({enableWebRtc: false,  //是否显示选项框level:99,  //层级级别completeCallback: this.callback,closeCallback: this.closeFn,);},0)

这个时间值可以不要，我是new时间没有触发才加的时间值，这个根据自己项目问题添加，如果还想使用其他参数和方法，请参考js-web-screen-shot网页

js-web-screen-shot - npm

第四步、截图成功要进行上传，将图片传递给后端，调用插件中的成功方法callback()上传图片,

记得要在html页面的body中引入canvas

<canvas id="loadingbar"></canvas>

    /*** 根据图片生成画布*/convertImageToCanvas(image) {var canvas = document.createElement("canvas");canvas.width = image.width;canvas.height = image.height;canvas.getContext("2d").drawImage(image, 0, 0);return canvas;},/*** 生成图片* 截图确认按钮回调函数*/callback(base64data) {var image = new Image();image.src = base64data;image.onload = () => {var canvas = this.convertImageToCanvas(image);var url = canvas.toDataURL("image/jpeg");// 在页面展示的数组，次数组是要把截图成功后的图片在页面上展示出来的数组，可以根据自己项目的需求进行添加this.uploadlist.push({image:url})for(var i=0;i<this.uploadlist.length;i++){if(this.uploadlist.length>=6){this.uploadhide=false;}}console.log(this.uploadlist,'push')var bytes = window.atob(url.split(",")[1]);  //通过atob将base64进行编码//处理异常，将ASCII码小于0的转换为大于0,进行二进制转换var buffer = new ArrayBuffer(bytes.length);var uint = new Uint8Array(buffer);  //生成一个8位数的数组for (var i = 0; i < bytes.length; i++) {uint[i] = bytes.charCodeAt(i);  //根据长度返回相对应的Unicode 编码}//Blob对象var imageFile= new Blob([buffer], { type: "image/jpeg" }); //type为图片的格式// 给后台返回的数组，我的项目需求是要截图多张上传给后端的，如果只上传一张直接就上传imageFile上一句就行，这个数组可以跟根据自己的需求进行编写this.imageFilelist.push(imageFile);if (this.imageFilelist != "") {this.$message({type: "success",message: "截图成功",});}};  },

第五步、就是通过axios将返回给后端

// 生成图片唯一名，要保证每张图片的名字唯一性所以才加上guid来保证图片的唯一性
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);});
}
//请求格式是from-data格式
export function ProblemAddStatistic(config) {let formData=new FormData();for(var i=0;i<config.imageFile.length;i++){formData.append('imageFile',config.imageFile[i],guid()+'.jpg');}return instance({url: "/****/****",   method: 'POST',data: formData,headers:{'Content-Type': 'multipart/form-data;charset=utf-8',}
}

运行效果图：

记得三连击！！！！

vue使用插件js-web-screen-shot完成局部截图并保存上传给后端相关推荐

vue.js — 安装Webpake创建一个完整的项目并上传至码云
vue.js - 安装Webpake创建一个完整的项目并上传至码云今天总结一下之前几天学习的一整套的创建项目方法: 前提条件:已安装node.js.npm/cnpm最新版本.vue-cli. VS ...
【Web技术】1016- 全面理解 8 种文件上传场景
在日常工作中,文件上传是一个很常见的功能.在项目开发过程中,我们通常都会使用一些成熟的上传组件来实现对应的功能.一般来说,成熟的上传组件不仅会提供漂亮 UI 或好的交互体验,而且还会提供多种不同的上传 ...
2020小迪培训（第21天 WEB 漏洞-文件上传之后端黑白名单绕过）
WEB 漏洞-文件上传之后端黑白名单绕过前言文件上传常见验证后缀名,类型,文件头等后缀名:黑名单,白名单黑名单:明确不允许上传的格式后缀 asp php jsp cgi war- 缺陷:在定 ...
Flask Web开发入门（十）之图片上传（使用Flask-Upload）
在Flask Web开发入门(八)之文件上传中,我们探讨了Flask框架下的文件上传,本章我们将使用Flask插件Flask-Uploads示例说明的图片上传与展现如何实现开始之前,我们先简单看下F ...
Vue调用摄像头录制视频和音频并上传给后端或下载到本地
下载插件 npm install --save webm-duration-fix 代码及作用调用摄像头 callCamera () {let _this = this;MediaUtils.get ...
WEB漏洞-文件上传之后端黑白名单绕过
WEB漏洞-文件上传之后端黑白名单绕过文件上传常见验证:后缀名,类型,文件头后缀名:黑名单,白名单黑名单:asp php jsp aspx cgi war- 白名单: txt jpg zip r ...
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交)
jquery.form.js的ajaxSubmit和ajaxForm使用(用于多文件上传以及其他参数的混合提交) ajaxSubmit 和ajaxForm区别 ajaxForm ajaxForm()不 ...
第21天-WEB漏洞-文件上传之后端黑白名单绕过
思维导图文件上传常见验证后缀名,类型,文件头等黑名单:明确不允许上传的格式后缀如:$deny_ext = array('.asp','.aspx','.php','.jsp'); 不允许上传后 ...
上传文件转换html异常,JS 文件互转、10 个 HTML 文件上传技巧、Web 用户体验设计提升指南、奇怪的知识——位掩码 | 思否技术周刊...
上传文件功能可以说是项目经常出现的需求.从在社交媒体上上传照片到在求职网站上发布简历,文件上传无处不在.在本文中,我们将讨论 HTML文件上传支持的10种用法,希望对你有用. 1. 单文件上传我们可 ...

vue使用插件js-web-screen-shot完成局部截图并保存上传给后端

使用 js-web-screen-shot 插件完成屏幕局部截图带截图工具栏，然后将截取的图片上传给后端

vue使用插件js-web-screen-shot完成局部截图并保存上传给后端相关推荐

最新文章

热门文章