JS截取页面+elemelt-upload上传

吐槽君发布于 3年前分类：javascript

需求：在地图上画分区域并截取指定部分生成图片上传至服务器；

JS截图无非就是将DOM转换成图片，无法做到真正意义上的截图，找来找去能实现这种效果的只有SVG与canvas画布了，网上推荐较多的就是html2canvas了，html2canvas集成了SVG与canvas两种生成方式

canvas只能一点点画出来，相较与SVG有foreignObject标签，能直接将DOM丢进去渲染出来。

html2canvas(document.body, {
    useCORS : true
}).then(function(canvas) {
    console.log(canvas); // canvas对象
    console.log(canvas.toDataURL('image/png')); // base64图片编码
}).catch(function() {
    console.log('截取失败');
});

因为在现有功能上新增的需求，之前文件上传使用的elemelt-upload组件，所以现在要把它转换为指定的file对象。

const bytes = window.atob(base64.split(',')[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {  
    ia[i] = bytes.charCodeAt(i);
};
let blobObj = new Blob([ab], { type: 'image/png' });
let newfile = new window.File([blobObj], _this.imgName + '.png', { type: blobObj.type })

实现效果：