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保存到本地

巴特西

Js/Jq 截图并上传

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

2·Base64 转 blob 函数

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

4·SpringBoot接收

最新文章

热门文章