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