Screenshot of the Vue project, Google Chrome downloads locally or saves it to the corresponding folder

Update: This method has been verified to be available under https

First download the plugin to the local project

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

For specific usage of the plugin, click on the hyperlink to view js-web-screen-shot

How to use it in the project

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,//截图关闭回调函数
	});
}

Callback function called after the plugin is instantiated

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");
        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() {
 },

Call callback at this time during local development, and find that it can be saved anywhere on the computer.
Then the cheating thing came. After putting it in the test environment, the function was not realized
until I saw this article showSaveFilePicker
and then carefully checked the showSaveFilePicker api, and found that this thing only supports https and local development. You can only let the backend get a certificate and switch to https when the page loads. It is still being implemented.
The current implementation method is overdone first,

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(",")[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为图片的格式  
        //将截图生成的图片传到后台，生成一个完成的连接地址
        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) => {
        });
    }; 
},

This is just the current transition plan. If https can be transferred in the future, please update it