Skip to content

头像剪切,编辑上传插件,图片上传node服务

Notifications You must be signed in to change notification settings

megatontech/avatar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

avatar

头像上传插件

目的:

帮助开发者快速开发上传头像功能点

背景:

现在b,g能搜到的头像上传插件并不太好用,所以想提供一个比较自由度的上传并且可以剪切的插件。

例子

  • 下载代码
    git clone git@github.com:guimeisang/avatar.git

  • 将node服务起起来

npm install 将express安装下;
node server.js
打开localhost:3000 既可;(特别注意不要直接打开index.html,否则会报图片同源限制的错误!)

请看demo:
https://guimeisang.github.io/avatar/index.html
可以上传一张图片看下;

实现大致思路如下:

  1. 先有一个上传的(本地上传的功能),然后获取图片的地址。
  2. 获取图片地址之后,进行截取图片(这里推荐一个插件)点这里,具体怎么用就不再赘述。
  3. 等截取图片之后,需要将截取的文件转换为二进制大文件。$('#image').cropper('getCroppedCanvas').toBlob();
  4. 调取接口,将二进制大文件上传即可。

直接上代码吧:

  1. 先引入如下文件
cropper.js [点这里](https://github.com/fengyuanchen/cropperjs)
  1. 具体业务代码 2.1 将代码下载下来并且调试(该demo在项目测试过,并且使用了。放心使用); 2.2 js代码中有详细的注释;

About

头像剪切,编辑上传插件,图片上传node服务

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.5%
  • CSS 5.3%
  • HTML 3.2%