前端之家收集整理的这篇文章主要介绍了
移动端Html5页面生成图片解决方案，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
现在有很多微信公众号运营活动，都有
生成图片的需求，
生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！
1.
生成图片可以用canvas,但是由于已经有了html2canvas这个开源库，所以为了节省时间就没有自己写了
github地址: html2canvas
少啰嗦，先看东西！！！
LiveDemo
/**
* 根据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');
// 设定 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);
let x = width;
let y = height;
return await html2canvas(dom,{canvas}).then(function () {
convertCanvasToImage(canvas,x,y)
})
}
/**
*
图片转base64格式
*/
function convertCanvasToImage(canvas,y) {
let image = new Image();
let _container = document.getElementsByClassName('container')[0];
let _body = document.getElementsByTagName('body')[0];
image.width = x;
image.height = y;
image.src = canvas.toDataURL("image/png");
_body.removeChild(_container);
document.body.appendChild(image);
return image;
}
drawCanvas('.container')
原文链接：https://www.f2er.com/html5/15584.html
