Js/Jq 截图并上传

今天想做一个 Js + Jq 截取网页图并上传到后端，经过一番折腾最终达到了效果。

1·首先需要用到一个非常强大的外部依赖库 html2canvas

html2canvas 官网：html2canvas - Screenshots with JavaScript (hertzen.com)

去官网复制 Js 依赖代码 （ html2canvas.js 或 html2canvas.min.js ）

新建一个js文件，把复制的代码放进去，哪个页面要用就导入这个 js（也可引用点进去后的url ）

导入 js 后官网给的示例只需要两份代码（HTML + Js）

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas);
});

代码放入后会有两个 Hello world! 下面那个就是图片，右键可下载

2·Base64 转 blob 函数

function base64ToBlob(base64, mime) {
    mime = mime || '';
    var sliceSize = 1024;
    var byteChars = window.atob(base64);
    var byteArrays = [];

    for (var offset = 0, len = byteChars.length; offset < len; offset += sliceSize) {
        var slice = byteChars.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }

    return new Blob(byteArrays, {type: mime});
}

3·获取生成的图片（调用此函数可获取图片并上传）

function getCanvas() {
    // 获得Canvas对象
    let canvas = document.getElementsByTagName("canvas")[0];
    let ctx = canvas.getContext('2d');
    ctx.drawImage(canvas, 0, 500, 500, 500); // 参考 drawImage() 函数用法
    let dataURL = canvas.toDataURL("image/png"); // 将canvas转换成base64
    dataURL = dataURL.substring(dataURL.indexOf(',') + 1, dataURL.length);
    // console.log(dataURL);

    var blob = base64ToBlob(dataURL, 'image/png'); // 将base64转换成blob
    var imgData = new FormData();
    imgData.append('file', blob);

　　// 上传
    $.ajax({
        url: 'http://127.0.0.1:8080/testData',
        type: "POST",
        dataType: 'json',
        contentType: false, //必须加
        processData: false, //必须加
        cache: false,
        contentType: false,
        data: imgData,
    }).done(function(e) {
        alert('done!');
    });
}

4·SpringBoot接收

@CrossOrigin // 跨域
@PostMapping("/testData")
public void testData(@RequestParam("file") MultipartFile imgData) throws IOException {
    if (imgData != null) {
        // 文件夹目录
        String folderPath = "C:\\Users\\cool\\Desktop\\";

        File fileDir = new File(folderPath);
        if(!fileDir.exists()) {
            fileDir.mkdirs();
        }

        // 获取图片名称（因上传的是blob，后缀需自定义）
        String savePath = folderPath + imgData.getOriginalFilename() + ".png";

        // 保存到本地
        imgData.transferTo(new File(savePath));
    }
}

获取+上传 事件，调用  getCanvas() 。

上文有的 Js 可以用 Jq 替代，这里就不作修改了。

到此一个简单的 网页截图 + 上传 功能就做好了，后期功能可以在此基础上拓展。

实现过程参考文章：

html2canvas - Screenshots with JavaScript (hertzen.com)

摄像头canvas对象转换成base64_想当程序员$的博客-CSDN博客

base64转文件（blob）遇到的一个问题 - 简书 (jianshu.com)

使用Ajax上传base64图像-前端-CSDN问答

实现图片文件上传保存到本地 MultipartFile_坐的我尾巴骨疼的博客-CSDN博客_multipartfile保存到本地