胸闷啊！关于图片上传前的裁剪问题！

Sean918 2010-03-09 11:27:29

目的是想做类似开心网那样的头像修改功能。

开心网的方式是分为2步：
1. 先上传图片；
2. 裁剪图片并保存。

我就想，为什么不能将图片裁剪放在上传前完成呢？只要知道图片的实际大小，以及裁剪区域的相对坐标，不难实现。

于是，我就开始尝试。

1. 用fileupload选择图片，此时发现，不能将 img 对象的 src 属性直接赋为客户端选到的图片。
然后找资料，发现可以用 div 的滤镜效果来实现上传前的预览：
<div id="imgPhoto" runat="server" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);" > </div>

2. 然后要想办法获取到图片的实际大小，以及后继的图片移动等操作，这个时候发现，使用div滤镜的方法无法得到实际图片的大小。我就想将fileupload选择的图片路径直接赋给img的src，然后操作img来完成剩下的动作。
这个时候发现，其实在第一步的时候已经发现不能将 img 对象的 src 属性直接赋为客户端选到的图片。

找了半天，结果估计是IE7以上版本以及FF都不自持直接将img的src属性设置为客户端的绝对路径，可能是考虑到了安全问题！

胸闷啊！难道就没有办法实现了么？

...全文

300 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

Jelly_tracy 2010-03-10

打赏
举报

现在很关注图片上传问题

calltaotao 2010-03-10

打赏
举报

2楼正解，图片未上传前在客户的本地硬盘，这时服务端是没有访问权限的。
除非客户安装相应的ActiveX，开放接口给服务端，服务端才有修改的权限。

以专业开发人员为伍 2010-03-10

打赏
举报

falsh 或者 silverlight 哪一个都可以。

誰是方長 2010-03-10

打赏
举报

up
回复内容太短了！

mayonglong 2010-03-10

打赏
举报

帮忙顶一下~
~~~

Fibona 2010-03-10

打赏
举报

为什么不能将图片裁剪放在上传前完成呢?

你要上传之前获取图片的大小，浏览器是不允许的

鸭梨山大帝 2010-03-10

打赏
举报

没上传前,图片是在本地硬盘的,基于安全性,JS是无法对其进行访问/写入等操作.
如果真的想上传前剪切,就只能强迫用户浏览器安装ActiveX.

引用楼主 wxy_xiaoyu 的回复:

目的是想做类似开心网那样的头像修改功能。

开心网的方式是分为2步：
1. 先上传图片；
2. 裁剪图片并保存。

我就想，为什么不能将图片裁剪放在上传前完成呢？只要知道图片的实际大小，以及裁剪区域的相对坐标，不难实现。

于是，我就开始尝试。

1. 用fileupload选择图片，此时发现，不能将 img 对象的 src 属性直接赋为客户端选到的图片。
然后找资料，发现可以用 div 的滤镜效果来实现上传前的预览：
<div id="imgPhoto" runat="server" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);" > </div>

2. 然后要想办法获取到图片的实际大小，以及后继的图片移动等操作，这个时候发现，使用div滤镜的方法无法得到实际图片的大小。我就想将fileupload选择的图片路径直接赋给img的src，然后操作img来完成剩下的动作。
这个时候发现，其实在第一步的时候已经发现不能将 img 对象的 src 属性直接赋为客户端选到的图片。

找了半天，结果估计是IE7以上版本以及FF都不自持直接将img的src属性设置为客户端的绝对路径，可能是考虑到了安全问题！

胸闷啊！难道就没有办法实现了么？