h5页面转png图片_移动端H5页面生成图片解决方案

现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！

1.

生成图片可以用canvas,但是由于已经有了html2canvas这个开源库，所以为了节省时间就没有自己写了

少啰嗦，先看东西！！！

/**

* 根据window.devicePixelRatio获取像素比

*/

function DPR() {

if (window.devicePixelRatio && window.devicePixelRatio > 1) {

return window.devicePixelRatio;

}

return 1;

}

/**

* 将传入值转为整数

*/

function parseValue(value) {

return parseInt(value, 10);

};

/**

* 绘制canvas

*/

async function drawCanvas (selector) {

// 获取想要转换的 DOM 节点

const dom = document.querySelector(selector);

const box = window.getComputedStyle(dom);

// DOM 节点计算后宽高

const width = parseValue(box.width);

const height