HTML页面生成图片并下载(html2canvas)

首先引入html2canvas，附上链接  https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js

使用 html2canvas 选取需要的区域并下载

//选取<div id="view"></div>的区域，此方法为页面的点击事件

function takeScreenshot() {
    html2canvas(document.getElementById('view')).then(canvas => {
        convertCanvasToImg(canvas)
    });
}

//转换图片格式
function convertCanvasToImg(canvas) {
    // canvas base64 转 blob
    var myBlob = dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
    // blob转URL对象
    myUrl = URL.createObjectURL(myBlob)
    // 创建a标签，下载图片
    downImg(myUrl)
}

//base64 转 blob
function dataURLtoBlob(dataurl) {
    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);
    }
    return new Blob([u8arr], { type: mime });
}

//下载图片 filename是图片名称
function downImg(url) {
    // 创建a标签 并设置其相关属性，最后触发其点击事件
    let a = document.createElement("a")
    let clickEvent = document.createEvent("MouseEvents");
    a.setAttribute("href", url)
    a.setAttribute("download", "filename")
    a.setAttribute("target", '_blank')
    clickEvent.initEvent('click', true, true)
    a.dispatchEvent(clickEvent);
}