npm install html2canvas
import html2canvas from 'html2canvas';
1.插件截图生成canvas,转成blob,再转成file文件流
html2canvas($("#app")[0]).then(function(canvas) {
canvas.toBlob((blobObj)=>{
let file = new window.File([blobObj], 'capture.jpg', {type: 'image/jpeg'});
let formData = new FormData();
formData.append("file",file);
$.ajax({
type: 'post',
url: 'xxxxx',
data: formData,
contentType:false,
processData:false,
success: function (data) {
console.info(data);
},
error: function (data) {
console.info(data);
}
});
});
});
2.插件截图生成canvas,先转成base64压缩,再转成blob,再转成file文件流
html2canvas($("#app")[0]).then(function(canvas) {
var dataURL =canvas.toDataURL('image/jpeg',0.5); //0.5是图片质量
var arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob=new Blob([u8arr], { type: mime });
let file = new window.File([blob], 'thumbnail.jpg', {type: 'image/jpeg'});
let formData = new FormData();
formData.append("file",file);
$.ajax({
type: 'post',
url: 'xxxx',
data: formData,
contentType:false,
processData:false,
success: function (data) {
console.info(data);
},
error: function (data) {
console.info(data);
}
});
});
3.封装成函数,调用后用.then(file=>{Todo...})接收
/**
* @name:利用html2canvas插件把DOM节点截图成为图片
* @param {DOM} DOM 需要截图的DOM节点 document.getElementById('box');
* @param {string} fileName 生成截图的名称 例如:'thumbnail.jpg'
* @param {number} ratio 图片压缩率(0.1-1)
*/
myHtml2canvas(DOM,fileName,ratio){
return new Promise((resolve)=>{
html2canvas(DOM).then(function (canvas) {
var dataURL = canvas.toDataURL('image/jpeg',ratio);
var arr = dataURL.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
let blob = new Blob([u8arr], { type: mime });
let file = new window.File([blob], fileName, {
type: 'image/jpeg',
});
resolve(file);
});
})
}
//使用
myHtml2canvas($('#componentContainer')[0],'thumbnail.jpg',0.5).then((file)=>{
console.log(file);
})