随笔-167  评论-65  文章-0  trackbacks-0
效果预览:


目的:用户上传一张图片后,可以对自己的大图片进行,选择区域宿略为小图,方法有很多,可以google : javascript crop image,javascript thumbnail image

步骤:
1,参照
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php
下载后,把php服务器端的代码去掉,只要client端的

2,注意点,原来的上传后,图片太大或者太小,都会以原大小显示,这样不好
(1),修改显示width, 和 height
         <img src="<%= @upload_src %>" style="float: left; margin-right: 10px;" id="thumbnail"  name="thumbnail" width="400" height="400"  alt="Create Thumbnail" />
          <div style="float:left; position:relative; overflow:hidden; width:100px; height:100px;">
            <img src="<%= @upload_src %>" style="position: relative;" width="75" height="100" alt="Thumbnail Preview" />       
          </div>
(2),获得选区的width,height需要改变,不然宿略图和小图不对应
  width: Math.round(scaleX * 400) + 'px', // 400就是我上面的i㎎的width
     height: Math.round(scaleY * 400) + 'px',

(3),可以改变选区的比列,3:4, 1:1 等等
 $('#thumbnail').imgAreaSelect({ aspectRatio: '3:4', onSelectChange: preview });

(4),把小图上传到后台,取得到是x1,y1,width,height等等,这样后台就可以根据参数操作图片了,我做的话,只是取了这四个参数就ok了
          <input type="hidden" name="x1" value="" id="x1" />
          <input type="hidden" name="y1" value="" id="y1" />
          <input type="hidden" name="x2" value="" id="x2" />
          <input type="hidden" name="y2" value="" id="y2" />
          <input type="hidden" name="w" value="" id="w" />
          <input type="hidden" name="h" value="" id="h" />

另外后台可以参考我这里,ruby代码
http://www.blogjava.net/fl1429/archive/2009/06/19/283282.html

显示图片问题可以参考这里:(图片上传到后台后,需要处理为大图片显示的大小,这样小图片才能相对应)
http://www.blogjava.net/fl1429/archive/2009/06/22/283629.html

ref:
http://odyniec.net/projects/imgareaselect/




write by feng
posted on 2009-06-23 18:51 fl1429 阅读(356) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航:
 
已访问数:
free counters