首先下载js插件html2canvas.js
一、把html转成canvas
html2canvas(document.querySelector("#sence"),{useCORS:true})
.then(canvas => {
dataUrl=canvas.toDataURL("image/jpeg", 1.0); //图片二进制格式
saveFile(dataUrl, 'custom.jpg');
});
二、把canvas保存成图片并下载
var saveFile = function (data,filename) {
let save_link=document.createElementNS('http://www.w3.org/1999/xhtml','a'); //img表示生成img元素或a元素或则可以放图片地址的元素
save_link.href=data; //img 元素中图片引入用src，a元素中图片的引入用href等等
save_link.download=filename; // 下载的名称
var event = document.createEvent('MouseEvents');//创建event事件
console.log(event);
//initMouseEvent 方法用于初始化通过 DocumentEvent 接口创建的 MouseEvent 的值, 详见下文：
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchEvent(event);
console.log(save_link)// <a href=data:image/jpeg:base64.....></a>
}
把html转成图片并上传到服务器
html2canvas(document.querySelector("#sence"),{useCORS:true})
.then(canvas => {
dataUrl=canvas.toDataURL("image/jpeg", 1.0); //图片二进制格式
var fd = new FormData();
fd.append("data", dataUrl);//image
// Submit Form and upload file
$.ajax({
url:"service.php", //save upload image
type:"POST",
data: fd, //submit formData
contentType:false,
processData:false,
dataType:"json",
async: false,
success: function (res) {},
error:function (err) {}
});
});
