移动端Html5页面如何生成图片

　　介绍

这篇文章主要介绍了移动端Html5页面如何生成图片,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

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

github地址:html2canvas

少啰嗦,先看东西! ! !

LiveDemo

/* * 　　*根据window.devicePixelRatio获取像素比 　　*/函数DPR () { 　　如果(window.devicePixelRatio,,window.devicePixelRatio祝辞1){ 　　返回window.devicePixelRatio; 　　} 　　返回1; 　　}/* * 　　*将传入值转为整数 　　*/函数parseValue(价值){ 　　回归方法(价值10); 　　};/* * 　　*绘制帆布 　　*/异步函数drawCanvas(选择){//获取想要转换的DOM节点 　　const dom=document.querySelector(选择); 　　const盒=window.getComputedStyle (dom);//DOM节点计算后宽高 　　const宽度=parseValue (box.width); 　　const高度=parseValue (box.height);//获取像素比 　　const scaleBy=DPR ();//创建自定义帆布元素 　　画布var=document.createElement(& # 39;帆布# 39;);//设定帆布元素属性宽高为DOM节点宽高*像素比 　　画布。宽度=* scaleBy宽度; 　　画布。身高=* scaleBy高度;//设定帆布css宽高为DOM节点宽高 　　canvas.style。宽度宽度=" $ {}px”; 　　canvas.style。身高=${高度}px的;//获取画笔 　　const上下文=canvas.getContext (& # 39; 2 d # 39;);//将所有绘制内容放大像素比倍 　　上下文。规模(scaleBy scaleBy); 　　 　　让x=宽度; 　　让y=身高; 　　返回等待html2canvas (dom,{帆布})。然后(函数(){ 　　convertCanvasToImage(画布,x, y) 　　}） 　　}/* * 　　*图片转base64格式 　　*/函数convertCanvasToImage(画布,x, y) { 　　让图像=新图像(); 　　让_container=document.getElementsByClassName(& # 39;容器# 39;)[0]; 　　让_body=document.getElementsByTagName(& # 39;身体# 39;)[0]; 　　的形象。宽度=x; 　　的形象。身高=y; 　　的形象。src=https://www.yisu.com/zixun/canvas.toDataURL(“图像/png”); 　　_body.removeChild (_container); 　　document.body.appendChild(图片); 　　返回图像; 　　} 　　drawCanvas (.container)

2。由于现在的手机都是高清屏,所以如果你不做处理就会出现模糊的情况,为什么会出现模糊的情况?这个就涉及到设备像素比devicePixelRatio js提供了window.devicePixelRatio可以获取设备像素比

函数DPR () {
　　如果(window.devicePixelRatio,,window.devicePixelRatio祝辞1){
　　返回window.devicePixelRatio;
　　}
　　返回1;
　　}

这个DPR函数就是获取设备的像素比,那获取像素比之后要做什么呢? 

画布var=document.createElement(& # 39;帆布# 39;);//设定帆布元素属性宽高为DOM节点宽高*像素比
　　画布。宽度=* scaleBy宽度;
　　画布。身高=* scaleBy高度;//设定帆布css宽高为DOM节点宽高
　　canvas.style。宽度宽度=" $ {}px”;
　　canvas.style。身高=${高度}px的;//获取画笔
　　const上下文=canvas.getContext (& # 39; 2 d # 39;);//将所有绘制内容放大像素比倍
　　上下文。规模(scaleBy scaleBy);

3。获取设备像素比之后将canavs。宽度和画布。高度去乘以设备像素比也就是scaleBy;这个时候在去设置canvas.style。宽度和canvas.style。高度为dom的宽和高。想想为什么要这么写?最后在绘制的饿时候将所绘制的内容放大像素比倍

举个例子iphone6S是设备宽高是375 X 667, 6 s的window.devicePixelRatio=物理像素/下降(2=750/375)所以设计师一般给你的设计稿是不是都是750 * 1334的吗?所以如果按照一比一去绘制在高清屏下就会模糊,看图说话6 s DPR=2

移动端Html5页面如何生成图片

6 + DPR=3

移动端Html5页面如何生成图片

4。最后调用canvas.toDataURL(“图像/png");赋值给形象。src,由于微信里面无法保存图片,所以只能生成图片文件,调用微信自带的长按保存到图片到相册功能,如图:

移动端Html5页面如何生成图片

感谢你能够认真阅读完这篇文章,希望小编分享移动端Html5页面如何生成图片内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

移动端Html5页面如何生成图片