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)
实现图片文件上传保存到本地 MultipartFile_坐的我尾巴骨疼的博客-CSDN博客_multipartfile保存到本地