将html页面转为图片,将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指定为第二步返回的二进制数据。