移动端Html5页面生成图片解决方案

大佬教程收集整理的这篇文章主要介绍了移动端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')

大佬总结

以上是大佬教程为你收集整理的移动端Html5页面生成图片解决方案全部内容，希望文章能够帮你解决移动端Html5页面生成图片解决方案所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。