表白图片:用Canvas实现h5移动终端图像剪辑

表白图片:用Canvas实现h5移动终端图像剪辑（几天前，我在中国情人节做了一个h5活动页面。我需要做一个本地图片的剪辑和上传功能来生成一些特定的爱情图片。它主要使用的是h5的超链接文件API和超链接画布。我觉得图像裁剪功能还是很实用的，所以我写了一篇文章来分享它。\n demo地址：hyperlink https://github.com/bess-l/img clipping\nresults:gif\n呈现演示\nr问题是演示是用超链接Vue实现的，因为我直接在项目中复制和更改了它，所以我不需要转换它。）\n请重新读取图片\n要裁剪的第一件事是读取图像文件。使用输入指定文件类型已经足够简单了。\n\n vue中的方法\nclipimg（event）\this。clip=新剪辑（\'container\'，this）；\n此。夹子。初始化（事件。目标。文件[0]）.\n关闭isclip=true；\n文档。尸体。addEventListener（\'touchmove，enclonding noscoll，false）；\n，\n其中有对获取文件的处理\n//这些方法写入剪辑类\nhandlefiles（file）\nlet t=this；\nlet reader=new filereader（）；\nreader。readasdataurl（文件）；\n读取。onload=function（）\nt.i mgurl=this。result；\nt.p aintimg（此结果）；\n \n \n创建一个新的filereader类，然后将读取的文件转换为使用readasdataurl的base64编码，然后使用paintimg方法进行绘制。\n请注意，文件读取是异步的，因此读取操作需要在on中进行。加载函数。\n拖动裁剪接口\n首先初始化\n，初始化一些基本参数\n//初始化\n输入（文件）\n这个。sx=0；//裁剪框的初始x\n这个。sy=0；//裁剪框的初始y值\n闭合开关h=233；//剪切框的宽度\n闭合高度=175；//剪切框的高度\n闭合选择框的高度=233/175；//剪切框的宽高比\n闭合手柄文件（文件）；\n \cr的比例收口盒固定在4:3，需要的学生可以更换。对于宽度和高度，首先根据设计草图设置一个值，然后根据不同的图片重置该值。\n绘制裁剪界面\n打印（picURL）\n//其他代码\n//…\nimg。onload=function（）\nlet imgscale=img.width/img.height；\nlet boxscale=t.rgional。偏移宽度/边缘。offsetheight；\n//确定方框与图片之间的比较\nif（imgscale=t.i.mgwidth-t.s.wid宽度）\nt.s.x=t.i.mgwidth-t.s.s.t.s.s.width；\n \\n \\n \\n\n 125；else \n t.y=starty+offsety；\n if（t.saty<=0）\n t.s y=0；\n如果（t.s.y>=t.m.ghei-t.height）\t.s.=t.m.ghei-t.height；\n \n \ntc utimage（）；\n \n）t.e ditbox，请使用。addEventListener（“TouchStart”，函数（ev）\nlet e=ev。触摸[0]；\n绘图=true；\n p agex=e.p agex；\n p agey=e.p agey excuse；\nstartx=t.s x；\nstary=t.s y；\n）t.e ditbox。addEventListener（'touchend'，function（）\ndraging=false；\n）\n这里的逻辑并不太复杂，首先记录初始位置，然后确定是向左还是向右移动，还是上下移动（对应于填充容器的高度和填充容器的宽度），然后根据pagex，pagey判断位置。\n保存图片\n保存（）\nlet t=this；\nlet s***ecanvas=document。createElement方法（“canvas”）；\nlet ctx=s***ecanvas。getContext（“2 d”）；\n//图片的剪切大小\ns***canvas。宽度=466；\n血管。height=350；\nlet images=new image（）；\n图像。src=t.i mgurl；\n图像。onload=函数（）\n//计算剪切图片的切割大小比例\nlet cropwidthscale=图像。width/t.i mgwidth；\nlet cropheightscale=图像。height/t.i mgheight；\nt.rawimageiosfix（ctx，images，cropwidthscale*t.s.x，cropheightscale*t.s.y，nt.width*cropwidthscale，t.height*cropheightscale，0，0，466，350）；\n//ctx.drawimage（images，2*t.s.x，2*t.s.y，t.s.width*2，t.s.height*2，0，0，466，350）；\n。$vm。clipURL=保存画布。ToDataURL（）；\t.r区域。removechild（t.g etimage）；\t.r地区。removechild（t.e ditbox）；\n \n \n此部分也非常简单。在裁剪框中记录裁剪开始和结束时的坐标，然后裁剪出一个新的画布，用todataurl方法转换成base64编码，然后传送到后台。我在这里剪的尺寸是固定的，这是一项业务要求，必要时可以更改。这是一般流程，谢谢阅读，如果有错误，请原谅我。”，'02f7b72cf530f36e'，'bor803pfv8lwg4mz0m3dykvkopl4tq0j'，4）表白图片:用Canvas实现h5移动终端图像剪辑