html图片自动移动,html5图片上传
现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！
1.生成图片可以用画布，但是由于已经有了html2canvas这个开源库，所以为了节省时间就没有自己写了
开源代码库地址：html2canvas
少啰嗦，先看东西！
现场示范
/** * 根据窗户。设备像素比例获取像素比*/函数DPR(){如果(窗口。devicepixelrratio窗口。devicepixelrratio 1){返回窗口。devicepixelrratio}返回1;} /** * 将传入值转为整数*/函数parse value(value){返回parse int(value，10)；};/** * 绘制画布*/异步函数绘图画布(选择器){ //获取想要转换的数字正射影像图节点const DOM=文档。查询选择器(选择器);常量框=窗口。getcomputedstyle(DOM)；//DOM节点计算后宽高常量宽度=解析值(框。宽度)；常量高度=解析值(框。身高)；//获取像素比常数scale by=DPR()；//创建自定义帆布元素var canvas=文档。createelement(“canvas”)；//设定帆布元素属性宽高为数字正射影像图节点宽高* 像素比canvas . width=width * scale by canvas . height=height * scale by//设定画布钢性铸铁宽高为数字正射影像图节点宽高画布。风格。width=` $ { width } px画布。风格。height=` $ { height } px//获取画笔const context=画布。获取上下文(“2d”)；//将所有绘制内容放大像素比倍context.scale(scaleBy，scale by)；设x=宽度；设y=身高；return await html2canvas(dom，{canvas}).然后(function(){ convertCanvasToImage(canvas，x，y) }) } /** *图片转base64格式*/function convertCanvasToImage(canvas，x，y){ let Image=new Image()；let _ container=文档。getelementsbyclassname( container )[0]；let _ body=文档。getelementsbytagname( body )[0]；形象。宽度=x；形象。高度=y；形象。src=画布。toda taurl( image/png )；_ body。移除子代(_ container)；文档。身体。appendchild(图像)；返回图像；} drawCanvas(.容器)2。由于现在的手机都是高清屏，所以如果你不做处理就会出现模糊的情况，为什么会出现模糊的情况？这个就涉及到设备像素比设备像素比率射流研究…提供了窗户。设备像素比例可以获取设备像素比
函数DPR(){如果(窗口。devicepixelrratio窗口。devicepixelrratio 1){返回窗口。devicepixelrratio}返回1;}这个项目文件函数就是获取设备的像素比，那获取像素比之后要做什么呢？
var canvas=文档。createelement(“canvas”)；//设定帆布元素属性宽高为数字正射影像图节点宽高* 像素比canvas . width=width * scale by canvas . height=height * scale by//设定画布钢性铸铁宽高为数字正射影像图节点宽高画布。风格。width=` $ { width } px画布。风格。height=` $ { height } px//获取画笔const context=画布。获取上下文(“2d”)；//将所有绘制内容放大像素比倍context.scale(scaleBy，scale by)；3.获取设备像素比之后将canavs。宽度和画布。高度去乘以设备像素比也就是比例尺这个时候在去设置画布。样式。宽度和画布。风格.高度为数字正射影像图的宽和高。想想为什么要这么写？最后在绘制的饿时候将所绘制的内容放大像素比倍
举个例子iphone6S是设备宽高是375 X 667,6秒的window.devicePixelRatio=物理像素/倾角(2=750/375)所以设计师一般给你的设计稿是不是都是750*1334的？所以如果按照一比一去绘制在高清屏下就会模糊，看图说话6S DPR=2
6加上DPR=3
4.最后调用canvas . toda taurl( image/png )；给image.src赋值，因为图片不能保存在微信里，所以只能生成一个图片文件。调用微信自带的长按功能将图片保存到相册，如图：
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。