Jcrop ,.net仿百度上传在线编辑头像

(源码下载链接: http://pan.baidu.com/s/1pJVxMAn 密码: gbuz)  个人习惯,代码不贴出来,自己去云盘下。

我们先看一下百度上传头像的页面。如下图。

再 看看我做的效果。

图1

图2

上面是我做出的效果,灰色是一个400X400的背景,图片会自动适应 (图1和图2 一个横向一个是纵向),宽度和高度始终能放入这个背景中。

介绍一下使用的技术,Jquery, Jcrop ,ajaxfileupload.js 。

我们先看一下百度上传头像的页面。如下图。

再 看看我做的效果。

图1

图2

上面是我做出的效果,灰色是一个400X400的背景,图片会自动适应 (图1和图2 一个横向一个是纵向),宽度和高度始终能放入这个背景中。

介绍一下使用的技术,Jquery, Jcrop ,ajaxfileupload.js 。

这个项目基本已经实现上传,在线编辑,后台切图功能,这里代码不贴出来了,直接给云盘,需要的小伙伴可以下载看看。

(链接: http://pan.baidu.com/s/1pJVxMAn 密码: gbuz)

到这里博客结束。

时间: 2024-07-29 10:23:27

Jcrop ,.net仿百度上传在线编辑头像的相关文章

dedecmsV5.7 百度编辑器ueditor 多图上传 在线管理 排序问题

问题:dedecms后台百度编辑器ueditor的多图上传-在线管理的图片排序有问题,想把这个顺序调成按照文件修改时间倒序来展示 解决方法: 1.打开/include/ueditor/php/aciton_list.php 在最后添加下面这个方法 function array_sort($array,$row,$type){ $array_temp = array(); $arr=array(); foreach($array as $v){ $array_temp[$v[$row]] = $v

基于nodeJs express 框架的图片上传和编辑(引用美图编辑工具)上传小示例

唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会.还望路过的基友们不要抱怨,勿喷,,,,, 本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果.不过就小码哥感觉,基本思路及基本功能算是完成了. 下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等. 首先,说说NodeJs Express框架的搭

js会员头像上传拖动处理头像类

js会员头像上传拖动处理头像类 点击下载源码文件

【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进行重新编辑的时候,这些图片怎么办?由于对js不是很熟悉,就没有想去修改这个组件的代码.只有重新寻找合适的组件,于是就找到了百度的WebUploader,下面简要描述一下该组件在MVC中的使用,包括图片的上传和预览,以及在编辑界面对图片的处理办法. 先来一张效果图: (一)图片的上传和预览 (1)下载

支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜索更合适的插件 首先试过PhotoClip,这个插件裁剪区域是固定的,不能自定义缩放(也许需求太匆忙没有研究透,亦或者可以修改原文件优化这一点),对于用户体验不够好,故,放弃 然后又遇到一款插件---Jcrop,完美符合需求,项目结合百度插件 WebUploader上传获取原图,可适配移动端选取相册

百度上传组件:webuploader

百度图片上传组件: 页面: <div class="upload"> <section> <article> <div class="wu-example"> <div id="fileList" class="uploader-list"></div> <span id="picker">上传出生证明</span&g

百度上传插件WebUploader,angularjs指令封装

1.WebUploader特点 官网地址:http://fex.baidu.com/webuploader/ 1.1 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上传速度. 当网络问题导致传输错误时,只需要重传出错分片,而不是整个文件.另外分片传输能够更加实时的跟踪上传进度. 1.2 预览.压缩 支持常用图片格式jpg,jpeg,gif,bmp,png预览与压缩,节省网络数据传输. 解析jpeg中的meta信息,对于各种orientation做了正确的处理,同

node.js(express)中使用Jcrop进行图片裁切上传

需求说明 简单来说就是要实现用户上传头像,并且要保存用户裁切后的部分作为用户头像. 第一步,选择图片: 第二步,在弹窗页面中展现并进行裁切: 第三步,点击"保存",上传服务器. 实现过程 说来有点坎坷,相当于做了2遍,走了弯路. 第1遍是用户一选择图片,就进行了上传,然后返回一个地址,所以在弹层上展现的图片已经是服务器上的图片了,然后进行裁切,再保存. 第2遍找到的一个方法,是在第1遍做到裁切处理时候想到的,即弹层展现的是用户机器上选择的图片,不用先上传,但是用image/base64

Jcrop+uploadify+php实现上传头像预览裁剪

最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁切点的坐标进行裁剪. 首先看一下uploadify上传插件的API: uploader : uploadify.swf 文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击后淡出打开文件对话框,默认值:uploadify.swf.script :   后台处理程序的相对路径 .默认值: