HTML生成图片

步骤一：下载 html2canvas 并引入

html2canvas - Screenshots with JavaScript (hertzen.com)

步骤二：页面使用

创建一个点击按钮

<button id="exportPng">图片生成</button>

js中使用

// export-content 为需要导出成图片的页面 ID

$('#exportPng').click((e) => {
    html2canvas(document.getElementById('export-content')).then(function (canvas) {
        var imgData = canvas.toDataURL('image/png');
        var link = document.createElement('a');
        link.href = imgData;
        link.download = 'exported-image.png';
        link.click();
    });
})

问题一：页面存在img标签 src是网络地址的导出不显示？

解决：将img src地址转化成base64

方法一：

let img = new Image();
img.crossOrigin = 'Anonymous'
img.src = "default.jpg!1 (200×200) (csdnimg.cn)"
img.onload = () => {
    // 新建画布
    const canvas = document.createElement('canvas')
    // 画布大小与图片一致
    canvas.width = img.naturalWidth
    canvas.height = img.naturalHeight
    // 2D 画布将图片绘制上去
    const ctx = canvas.getContext('2d')
    // 绘制图片
    ctx.drawImage(img, 0, 0)
    $('#myImg')[0].src = canvas.toDataURL('image/png')
}

方法二：

let url="default.jpg!1 (200×200) (csdnimg.cn)"

function convertToBase64(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function () {
            if (xhr.status === 200) {
                const reader = new FileReader();
                reader.onloadend = function () {
                    resolve(reader.result);
                };
                reader.readAsDataURL(xhr.response);
                reader.onload = () => {
                    $('#myImg')[0].src = reader.result
                }
            } else {
                reject(new Error('Image loading failed. Status code: ' + xhr.status));
            }
        };
        xhr.onerror = function () {
            reject(new Error('Image loading failed.'));
        };
        xhr.send();
    });
}