自定义截屏插件

爱吃土豆鸡块
101 阅读3分钟

自定义截图

  1. html2canvas

    <!--截屏按钮图标-->
<el-button type="primary" icon="" @click="btnClick">点击截屏</el-button>

    // 安装
npm install html2canvas --save
yarn add html2canvas --save

// 引入
import html2canvas from 'html2canvas'

// 方法使用
screenShot() {
    //获取页面dom
    //这里的html标签是获取页面最大的dom元素；根据实际业务场景自行更改
    const el = document.querySelector('html');
    html2canvas(el, {allowTaint: true}).then((canvas)=> {
        //document.body.appendChild(canvas)  页面布局会乱
        //转换base64
        const capture = canvas.toDataURL('image/png');
        //下载浏览器弹出下载信息的属性
        const saveInfo = {
            //导出文件格式自己定义，我这里用的是时间作为文件名
            'download': +`测试.png`,
            'href': capture
        };
        //下载，浏览器弹出下载文件提示
        this.downloadFile(saveInfo);

        //调用保存接口 如果需要后台保存，放开注释
        /*   uploadImage({capture:capture}).then(res => {
             if (res.code == 200) {
               this.$message.success("截取成功！")
             }
           });*/
    })
},

//下载截图
downloadFile(saveInfo) {
    const element = document.createElement('a');
    element.style.display = 'none';
    for (const key in saveInfo) {
        element.setAttribute(key, saveInfo[key]);
    }
    document.body.appendChild(element);
    element.click();
    setTimeout(() => {
        document.body.removeChild(element);
    }, 300)
}

  2. js-web-screen-shot

    <!--截屏按钮图标-->
<el-button type="primary" icon="" @click="btnClick">点击截屏</el-button>

    // 安装
npm install js-web-screen-shot --save
yarn add js-web-screen-shot --save

// 引入
import ScreenShort from "js-web-screen-shot";

// data 中定义
uploadlist: [],
imageFilelist: []
    
// 使用
btnClick() {
    const screenShotHandler = new ScreenShort({
        enableWebRtc: false,  //是否显示选项框
        level: 9999,  //层级级别
        completeCallback: this.callback,
        closeCallback: this.closeFn,
    });
}
    
callback(base64data) {
    var image = new Image();
    console.log(base64data);
    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 !== "") {
            console.log("截图成功")
            // this.$message({
            //   type: "success",
            //   message: "截图成功",
            // });
        }
    }
}

  3. region-screenshot-js

    <!--截屏按钮图标-->
<el-button type="primary" icon="" @click="btnClick">点击截屏</el-button>

    // 安装
npm install region-screenshot-js --save
yarn add region-screenshot-js --save

// 引入
import regionScreenshot from 'region-screenshot-js';

// 使用
screenshot(){
    let screentsot = new regionScreenshot();
    screentsot.on("screenshotGenerated",(dataUrl)=>{
        console.log("截图完成了，图片的地址是："+dataUrl)
    })
}

  4. 快捷键

    // alt + a
// 保存当前按下的键
let keysPressed = {};

// 监听键盘按下事件
document.addEventListener('keydown', (event) => {
    // 将按下的键记录到 keysPressed 对象中
    keysPressed[event.key.toLowerCase()] = true;
    // 检测是否按下特定的键组合
    if (keysPressed['alt'] && keysPressed['a']) {
        this.xxxxxxx()  // 调用截图方法
        event.preventDefault(); // 阻止默认行为（如保存页面）
        keysPressed = {}
    }
});

  5. 实例

<template>
    <div class="commitment-letter">
        <div class="icon-button right">
            <!--截屏按钮图标-->
            <el-button type="primary" icon="" @click="btnClick">点击截屏</el-button>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import ScreenShort from "js-web-screen-shot";
import regionScreenshot from 'region-screenshot-js';

export default {
    name: 'CommitmentLetter',
    data(){
        return {
            uploadlist: [],
            imageFilelist: [],
        }
    },
    created() {
        // 保存当前按下的键
        let keysPressed = {};

        // 监听键盘按下事件
        document.addEventListener('keydown', (event) => {
            // 将按下的键记录到 keysPressed 对象中
            keysPressed[event.key.toLowerCase()] = true;
            // 检测是否按下特定的键组合
            if (keysPressed['alt'] && keysPressed['a']) {
                this.btnClick()
                event.preventDefault(); // 阻止默认行为（如保存页面）
                keysPressed = {}
            }
        });
    },
    methods:{
        // regionScreenshot
        screenshot(){
            let screentsot = new regionScreenshot();
            screentsot.on("screenshotGenerated",(dataUrl)=>{
                console.log("截图完成了，图片的地址是："+dataUrl)
            })
        },
        // ScreenShort
        btnClick() {
            const screenShotHandler = new ScreenShort({
                enableWebRtc: false,  //是否显示选项框
                level: 9999,  //层级级别
                completeCallback: this.callback,
                closeCallback: this.closeFn,
            });

        },
        callback(base64data) {
            var image = new Image();
            console.log(base64data);
            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 !== "") {
                    console.log("截图成功")
                    // this.$message({
                    //   type: "success",
                    //   message: "截图成功",
                    // });
                }
            };
        },
        convertImageToCanvas(image) {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext("2d").drawImage(image, 0, 0);
            return canvas;
        },
        closeFn(){

        },
        // html2canvas截图
        screenShot() {
            //获取页面dom
            //这里的html标签是获取页面最大的dom元素；根据实际业务场景自行更改
            const el = document.querySelector('html');
            html2canvas(el, {allowTaint: true}).then((canvas)=> {
                //document.body.appendChild(canvas)  页面布局会乱
                //转换base64
                const capture = canvas.toDataURL('image/png');
                //下载浏览器弹出下载信息的属性
                const saveInfo = {
                    //导出文件格式自己定义，我这里用的是时间作为文件名
                    'download': +`测试.png`,
                    'href': capture
                };
                //下载，浏览器弹出下载文件提示
                this.downloadFile(saveInfo);

                //调用保存接口 如果需要后台保存，放开注释
                /*   uploadImage({capture:capture}).then(res => {
                     if (res.code == 200) {
                       this.$message.success("截取成功！")
                     }
                   });*/
            })
        },

        //下载截图
        downloadFile(saveInfo) {
            const element = document.createElement('a');
            element.style.display = 'none';
            for (const key in saveInfo) {
                element.setAttribute(key, saveInfo[key]);
            }
            document.body.appendChild(element);
            element.click();
            setTimeout(() => {
                document.body.removeChild(element);
            }, 300)
        }
    }
}
</script>
<style lang="less" scoped></style>
avatar
文章
阅读
粉丝