现在有很多微信公众号运营活动，都有生成图片的需求。生成图片后可以发送给朋友，朋友圈传播，有利于产品推广！1、canvas可以用来生成图片，但是由于已经有html2canvas的开源库，所以为了节省时间，github地址我就不自己写了：html2canvas比较啰嗦，先看东西吧！！！LiveDemo/***根据window.devicePixelRatio获取像素比*/functionDPR(){if(window.devicePixelRatio&&window.devicePixelRatio>1){returnwindow.devicePixelRatio;}返回1;}/***将传入的值转换为整数*/functionparseValue(value){returnparseInt(value,10);};/***绘制画布*/asyncfunctiondrawCanvas(selector){//获取要转换的DOM节点constdom=document.查询选择器（选择器）；constbox=window.getComputedStyle(dom);//计算DOM节点的宽高constwidth=parseValue(box.width);constheight=parseValue(box.height);//获取像素比例constscaleBy=DPR();//创建自定义画布元素varcanvas=document.createElement('canvas');//设置canvas元素属性的宽高为DOM节点宽高*像素比canvas.width=宽度*scaleBy;canvas.height=height*scaleBy;//将canvascss宽度和高度设置为DOM节点宽度和高度canvas.style.width=`${width}px`;canvas.style.height=`${height}px`;//获取画笔constcontext=canvas.getContext('2d');//按像素比例放大所有绘图内容context.scale(scaleBy,scaleBy);让x=宽度；让y=高度；returnawaithtml2canvas(dom,{canvas}).then(function(){convertCanvasToImage(canvas,x,y)})}/***将图像转换为base64格式*/functionconvertCanvasToImage(canvas,x,y){let图片=新图片（）；让_container=document.getElementsByClassName('container')[0];让_body=document.getElementsByTagName('body')[0];图片.宽度=x;image.height=y;image.src=canvas.toDataURL("图像/png");_body.removeChild(_container);document.body.appendChild(图片);返回图像；}画画vas('.container')2.由于现在的手机都是高清屏，如果不做任何处理，就会出现模糊。为什么会有模糊？这里涉及到设备像素比devicePixelRatiojs提供window.devicePixelRatio获取设备像素比函数DPR(){if(window.devicePixelRatio&&window.devicePixelRatio>1){returnwindow.devicePixelRatio;}返回1;}这个DPR函数是获取设备的像素比，那么获取到像素比后应该做什么呢？varcanvas=document.createElement('canvas');//设置canvas元素属性的宽高为DOM节点宽高*像素比canvas.width=width*scaleBy;canvas.height=height*scaleBy;//设置canvascss宽度和高度为DOM节点宽度和高度canvas.style.width=`${width}px`;canvas.style.height=`${height}px`;//获取画笔constcontext=canvas.getContext('2d');//放大所有绘图内容的像素比例context.scale(scaleBy,scaleBy);3、获取设备像素比后，将canvas.width和canvas.height乘以设备像素比，即scaleBy；这个时候，去设置canvas.style.width和canvas.style.height为dom的宽高。想想为什么要这样写？最后在绘图饿了的时候，将绘制的内容按像素比例放大。比如iphone6S的宽高是375X667，6S的window.devicePixelRatio=physicalpixel/dips(2=750/375)，所以平时设计师给你的设计稿都是750*1334？所以如果在高清屏幕上一对一画，会很模糊。看图说6SDPR=26plusDPR=34。最后，调用canvas.toDataURL("image/png");并赋值给image.src，因为微信不能保存图片，所以只能生成图片文件，调用微信长按功能保存图片到相册，如图：5.参考文章曾经H5《网页另存为图片》对设备像素比的简单介绍devicePixelRatio如何处理html5canvas在高倍屏下模糊的处理基于html2canvas，将网页另存为图片，优化图片定义窗口。设备像素比
