移动端H5页面实现生成图片的代码

本篇文章给大家带来的内容是关于移动端H5页面实现生成图片的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

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 = parseValue(box.height);
 // 获取像素比
 const scaleBy = DPR();
 // 创建自定义 canvas 元素
 var canvas = document.createElement('canvas');