JavaScript头像上传器的实现

最近做这方面的东西，刚开始准备用一个开源项目：https://github.com/yueyoum/django-upload-avatar

后来发现这个开源组件的原设计者的定制化选项设计略显复杂,发现了它的主要设计技术组件，于是准备自己动手写一个。

首先那个图片切割选择器的实现有一个很成熟的jQuery 插件叫：imgAreaSelect，官方地址：http://odyniec.NET/projects/imgareaselect/ ，github项目地址：https://github.com/odyniec/imgareaselect ，还有人做了文档汉化：http://www.jb51.net/article/28485.htm

切割预览是通过包含img的div的overflow：hidden来完成模拟切割，大小压缩通过图片的长宽调整来实现。

大概流程应该是首先选定图片后即上传图片,上传以后的图片供候选的图片切割选择器和图片预览img元素使用。切割和缩放选定之后，上传切割坐标数据然后在后端对之前上传的预览图做切割缩放处理.

这个方案对比Flash实现方案：Flash能直接摄像头照相,Flash的切割压缩在客户端本地。对比HTML5方案，html5应该也能对图片在客户端本地做处理。不过Flash单独开发太麻烦，现在Flash逐渐完成转向复杂多媒体解决方案了，Html5存在浏览器要求问题。

转载于:https://www.cnblogs.com/dhcn/p/7106499.html

JavaScript头像上传器的实现相关推荐

头像上传html js版,javascript头像上传代码实例
上传头像: 相关关键词: ondragover(拖动元素在投放区内移动) ondrop (元素放在投放区触发但是要去处理浏览器默认事件的影响:ondragenter.ondragover) dataT ...
如何使用HTML5，JavaScript和Bootstrap构建自定义文件上传器
by Prashant Yadav 通过Prashant Yadav 如何使用HTML5,JavaScript和Bootstrap构建自定义文件上传器 (How to build a custom f ...
layui文件上传(头像上传)
头像上传头像上传大概流程就是选择电脑上的文件图片然后上传到服务器服务器存起来然后上传到浏览器中,服务器需要用到磁盘存储模块(multer),需要下载安装 multer是Nodejs中用于处理文件上传 ...
Day88.七牛云: 房源图片、用户头像上传 Common-upload、Webuploader
目录一.七牛云存储 4.鉴权二.开发者中心,上传.删除测试 1.添加依赖 2.代码测试 3. 封装工具类三.房源图片上传 1. spring mvc 配置上传支持 2. house/show.h ...
Java实现用户头像上传（修改默认文件大小限制）
概述每次说起文件上传,就不得不提一下前端的实现方式,说来也奇怪,本博主最热门的博客居然也是文件上传,3万多的访问量占了总访问量的一多半:<传统form表单提交方式的文件上传与文件存储>, ...
php头像上传思路,PHP头像上传，php头像上传_PHP教程
PHP 头像上传,php头像上传嘻嘻,自从圣诞节过后,就一直懒散,这几天也因为是太过于繁忙的原因,感觉好久都没有出来冒冒泡,诶... 为了生活一直在奋斗,作为一名前端开发工程师,我现在越来越迷茫了, ...
调用android的拍照或本地相册选取再实现相片上传服务器,Android调用系统相机、本地相册上传图片(头像上传(裁剪)、多张图片上传)...
开发中基本上都会有头像上传的功能,有的app还需要多张图片同时上传,下面简单将头像上传以及多张图片上传功能整理一下.图片选择仿照微信选择图片的界面.[参考] 多图片选择器 !!!推荐一个动态权限请求的 ...
java微信头像失效问题，将微信头像上传至七牛云
抓取微信头像保存之后,过一段时间会出现头像失效问题,到现在还是不清楚微信头像地址失效规则,为了避免微信头像失效导致的头像显示问题,最好是微信头像上传到第三方云存储空间,这里用的是七牛云存储. 七牛云提 ...
PHP+ajaxfileupload 实现用户头像上传
今天写项目的时候需要一个让登录的用户上传头像的功能,然后上网搜了一下,发现有一个不错的Ajax插件ajaxfileupload,所以就拿来用,感觉效果不错,在这里和大家分享一下.下面将用PHP+aja ...

JavaScript头像上传器的实现

JavaScript头像上传器的实现相关推荐

最新文章

热门文章