canvas裁剪图片上传,canvas怎么上传图片

　　因为原型图和插件ui不一样，所以我自己写了一个方法。

　　首先必须有一个上传按钮。

　　input type= file id= fileys class= fileys @ change= upload file($ event) accept= image/* /！- uploadFile使用更改是因为。用户可能会反复选择其他图片-言归正传：

　　uploadFile:function(event){ let file=event . target . files[0]；//获取输入let param=new FormData()的图像文件值；//创建一个form对象if(param . getall( file )[0]= undefined ){ return false//判断是否为空} let reader=new filereader()reader . readasdataurl(file)//读取文件并以url的形式保存在base64格式的resulr属性中。网上文档好像是。我选了一个base64阅读器。onload=function(e){//读取文件时，让result=e.target.result//base64格式图片地址var image=new image()image . src=result//将image的地址设置为base64 image . onload=function(){ var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；画布.宽度=图像.宽度；//将画布的画布宽度设置为图片宽度canvas . height=image . height；Context.drawimage (image，0，0，image.width，image . height)//在画布上画图let data URL=canvas . toda aurl( image/JPEG ，0.001)//设置压缩比，可以根据需要设置，设置过小会影响画质。dataUrl是压缩图片资源，可以上传到服务器Lettupian=_ this . dataurltofile(dataUrl，file.name) param.append (file ，tu pian)；//对应后台接收图片名//那么你可以在这里写axios方法。去把这个param上传到后台}}以上就是本文的全部内容。希望对大家的学习有帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。