将Html页面转img图片功能

方案

  将html转成canvas，再利用canvas导出img功能达到目的。

 

实现

import html2canvas from 'html2canvas';

function DPR() {
    if (window.devicePixelRatio && window.devicePixelRatio > 1) {
        return window.devicePixelRatio;
    }else{
        return 1;
    }
}

function parseValue(value) {
    return parseInt(value, 10);
}

//同步加载图片
export const img2base64 = async (url, crossOrigin) => {
    return new Promise(resolve => {
        const img = new Image();

        img.onload = () => {
            const c = document.createElement('canvas');

            c.width = img.naturalWidth;
            c.height = img.naturalHeight;

            const cxt = c.getContext('2d');

            cxt.drawImage(img, 0, 0);
            // 得到图片的base64编码数据
            resolve(c.toDataURL('image/png'));
        };

        crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
        img.src = url;
    });
};

//dom -> canvas
export const drawCanvas = async selector => {
    // 获取想要转换的 DOM 节点
    const dom = document.querySelector(selector);
    const box = window.getComputedStyle(dom);
    // DOM 节点计算后宽高
    const width = parseValue(box.width);
    const height = parseValue(box.height);
    // 获取像素比-防止模糊
    const scaleBy = DPR();
    // 创建自定义 canvas 元素
    const canvas = document.createElement('canvas');

    // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
    canvas.width = width * scaleBy;
    canvas.height = height * scaleBy;
    // 设定 canvas css宽高为 DOM 节点宽高
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    // 获取画笔
    const context = canvas.getContext('2d');

    // 将所有绘制内容放大像素比倍
    context.scale(scaleBy, scaleBy);

    // 将自定义 canvas 作为配置项传入，开始绘制
    return await html2canvas(dom, {canvas}).then(canvas => {
        //document.querySelector("#canvasContainer").appendChild(canvas);
        //return canvas.toDataURL("image/png");
        return canvas.toDataURL("image/png")
    });
};

第一步：html中所有的图片资源都要用img2base64的方式加载，然后dom加载完成之后再进行第二步。

第二步：html --> canvas  利用drawCanvas方法，这里需要引用html2canvas库，具体见github文档。

第三部：插入img元素，src指定为第二步返回的二进制数据。