小议头像预览裁剪上传的实现

在做头像上传的时候,浏览器默认是无法取得本地图片的,当然 HTML5 是可以的。
不过IE6-8怎么破?
目前比较通用的方案都是 flash 解决。

说道头像预览和裁剪,我最熟悉的就是 Discuz 的那个了,非常方便好用。
不仅可以选择本地图片,还能直接调用摄像头拍摄,当然前提是你必须有个摄像头。

于是我心血来潮的想把他剥离出来给项目用,于是有就了此文。。
我就不说怎么提取怎么调用,就简单的谈谈他是怎么处理图片好了,反正不是我们想的那样,和我想的出入非常大。

这个插件呢,差不多分为四步处理:
1. 前台用js生成IE或现代浏览器用的flash嵌入标签
2. 通过 flash 选择图片上传给服务器 (没错, 这货是直接上传原图的)
3. 读取刚刚上传到服务器的图片,进行裁剪处理。
4. 把裁剪好的图片分别缩放为 200x200, 120x120, 48x48 的图,当然不文件,而是编码数据提交给后台,
没仔细看是什么编码,反正后台解码后fopen写入文件的。

当然果然是摄像头拍摄的话,2, 3步变为拍摄,1, 4一样的。
好了,看过步骤,相信大家和我一样灰常桑心,,说好的预览,肿么变成上传后预览了,那要你何用?
难道仅仅为了裁剪而调用这么变态的插件么?这不是我的作风。(当然目前用他,因为项目时间有限,之后再重写)

下面我们来谈下 js 实现思路吧。
既然没办法预览(HTML5除外),那么我们就先上传,然后"裁剪"即可。
FormData或iframe做伪ajax上传,得到文件路径后,就可以预览,
然后"裁剪"即可。
当然不是真正的裁剪,也是伪裁剪,只是记录坐标后提交给后台,让后台为我们真正的裁剪。
因为图片第一步上传了,第二步我们只要ajax提交裁剪区域坐标即可,不需要重新上传图片。
相信聪明的你一定想到怎么实现了。

当然你也可以参考 碳酸次钴 写的《在线图片裁剪(兼容IE8)》。
其实如果不是滤镜的兼容性和安全问题就可全兼容,
当然我的思路就是直接上传后裁剪,所以是真正的全兼容。

小议头像预览裁剪上传的实现,布布扣,bubuko.com

时间: 2024-10-08 06:26:01

小议头像预览裁剪上传的实现的相关文章

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

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

前端图片预览,上传前预览,兼容IE7、8、9、10、11,Firefox,Chrome

在现在的Web开发中不可避免的会做一个图片预览的功能, 比如在上传图片的情况下,一个很简单的办法就是讲图片上传至服务器之后,再将文件的URL返回回来,然后异步通过这个URL加载刚刚上传的图片,实现图片的预览, 很明显的在这个过程中两次Web请求,一次发送文件,一次下载文件,到最后这个文件如果在客户端被删除(取消上传,弃用这次的上传), 这整个过程都白费了.我们希望能够在图片上传之前就能进行图片的预览,这样就避免了不必要的网络请求和时间等待. 在IE中有如下方式 var url; var file

图片选择,预览及上传

记得以前老师教我们写项目,要实现图片上传的功能,我们都是先用一个input选好图片,然后单独做一个提交图片的按钮,点击按钮,使用form表单提交到后台,然后通过 // 获取上传的文件 HttpPostedFileBase file = Request.Files[0]; 这一行来获取上传到后台的文件,然后来验证上传的文件是不是图片,其实在前台,通过设置input属性,就可以限制我们只能选择图片文件了,当然,后台的验证也是不能少的, // 设置accept属性,限制能选择的文件类型为图片 <inp

js实现图片预览以及上传

HTML 代码: <input  type="file" id="fileid" onchange="filesize(this)" runat="server" size="80" Width="200px" Height="25px"/>  <input  type="hidden" id="hidden_s&quo

前台页面 上传预览 调用上传服务

function openBrowse(){ var ie=navigator.appName=="Microsoft Internet Explorer" ? true : false; if(ie){ document.getElementById("file").click(); document.getElementById("filename").value=document.getElementById("file"

如何预览将要上传的图片-使用H5的FileAPI

这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有本地化可以选择中文) 要做什么效果呢, 就是页面上有个<input type="file" />, 用户选择需要上传的图片后, 页面上显示将要上传的图片. 以前呢, 需要Ajax将原图上传到服务器, 得到成功响应后在页面上添加一张图片. 如果用户发现上传错了, 需要把服务器上的

图片预览剪裁上传

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> #mask { float: left; w

js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)

值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回:  res.localIds用于上传图片使用    上传图片:wx.uploadImage. 2.上传图片的时候务必是一张一张的上传的(建议采用递归) 3.一张图片上传成功后务必需要延迟个几百毫秒再执行下一张的上传. 案例:深圳艺星“#美力女生#星粉颜值夏令营,2019Yestar艺星整形” Html <div class="photos"> <p>同时选择上传1-9张照片,

利用jquery,html5实现图片预览实时上传

          html代码 <div class="form-group"> <label for="pic" class="col-md-1 control-label">小图:</label> <div class="col-md-4"> <input type="file" class="form-control" nam