Vue项目截图，谷歌浏览器下载本地或者另存为到对应的文件夹

更新： 已验证 https下此方法可用

首先下载插件到本地项目

cnpm install js-web-screen-shot --save

插件具体使用可点击超链接查看js-web-screen-shot

在项目中具体使用方法

import ScreenShort from "js-web-screen-shot";
在业务代码中使用时实例化插件即可
cutImg () {
	const screenShotHandler = new ScreenShort({
	   enableWebRtc: false,//是否显示选项框
	   loadCrossImg:true,//是否加载跨域图片
	    level:9999999,//层级级别，这个其实就是z-index，主要是就是为了截弹框里的东西
	    completeCallback: this.callback,//截图完成回调函数
	    closeCallback: this.closeFn,//截图关闭回调函数
	});
}

实例化插件之后调用回调函数

convertimageToCanvas(image) {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image,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");
        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为图片的格式
        const name = new Date().getTime() + '.png'
        this.saveFile(imageFile,name)
    }; 
},async saveFile(blob,filename) { 
    try { 
        const handle = await window.showSaveFilePicker({ 
        suggestedname: filename,types: [ 
                { 
                    description: "PNG file",accept: { 
                        "image/png": [".png"],},],}); 
        const writable = await handle.createWritable(); 
        await writable.write(blob); 
        await writable.close(); 
        return handle; 
    } catch (err) { 
        console.error(err.name,err.message); 
    } 
},closeFn() {
 },

本地开发的时候这时候调用callback，发现可以保存到电脑里的任何地方去了。
然后坑爹的事情来了，放到测试环境后，功能并没有实现
直到翻到了这篇文章 showSaveFilePicker
然后仔细查了showSaveFilePicker这个api，发现这个东西只支持https和本地开发，科学上网之后也没找到好的解决办法。只能让后端搞个证书页面加载的时候转到https。目前还在实现中。
现在的实现方法搞了一个先过度一下，

callback(base64data) {
   console.log(base64data,'base64data')
    var image = new Image();
    image.src = base64data;
    image.onload = () => {
        var canvas = this.convertimageToCanvas(image);
        var url = canvas.toDataURL("image/jpeg");
        var bytes = window.atob(url.split(",进行二进制转换
        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为图片的格式  
        //将截图生成的图片传到后台，生成一个完成的连接地址
        let formData = new FormData(); //创建form对象
        formData.append('file',imageFile);
        formData.append('fileName','file');
        let config = {
            headers: { 'Content-Type': 'multipart/form-data' }
        };  //添加请求头
        const postUrl = getUploadFileUrl();
        axios.post(postUrl,formData,config)
        .then(response => {
            this.url = getimgurl() + urlData(response.data.data)
            var a;
            //windows电脑会弹出一个小的浏览框，图片在里面，可右键另存为
            a =window.open(this.url,"_blank","width=0,height=0");
            a.document.execCommand("SaveAs");
        })
        .catch((err) => {
        });
    }; 
},

这个只是目前的过渡方案，后续https如果能转过去，再更新一下

原文地址：https://blog.csdn.net/chenacxz/article/details/125858998