JS实现canvas把HTML保存成图片并下载到本地

首先下载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) {}
        });
});