胸闷啊!关于图片上传前的裁剪问题!
目的是想做类似开心网那样的头像修改功能。
开心网的方式是分为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属性设置为客户端的绝对路径,可能是考虑到了安全问题!
胸闷啊! 难道就没有办法实现了么?