利用js 或者 php 能获得<div>块中去掉overflow剩下的图片吗？

Question

例如：
<div style="width:100px;height:100px; overflow:hidden;">
<img src="#" id="preview"class="jcrop-preview" />
</div>
其实这张图片的像素大于100*100，但多余的部分被overflow属性给隐藏了，虽然显示出来的是图片的一部分，但真正的源文件没有变，有没有方法获得显示出来的图片块的源文件，就是下次不加overflow属性直接显示这个部分，也就相当于剪裁后的图像。

Answer 1

你的意思是自动截取100*100的大小的图片，而不是只是隐藏多出来的部分？从而提高图片显示速度降低带宽么？
如果每次都由服务器截取100长宽的图片，会消耗很多性能，可以另外生成一个大图片的小缩略图，每次网页显示时候调用这个小图而不是大图片。
具体代码我做过，不过很长，我给你点提示原理吧。
首先要启用gd库，怎么开启gd库各种系统有点不同，具体可以网上查一下。然后调用gd库的imagecreatefromjpeg等函数来获取原图片大小，并生成一个新的缩略图。

==代码=========
$isjpeg = @ imagecreatefromjpeg("这里填原图片路径，包括图片名")
//读取jpg图片
$old_width = imagesx($isjpeg);
$old_height = imagesy($isjpeg);
//获取原图片大小
$dest = imagecreatetruecolor(100, 100);
//设定生成的目标图片大小。
imagecopyresized($dest, $source, 0, 0, 0, 0, 100, 100, $old_width, $old_height);
//$dest就是生成的缩略图.然后写到硬盘上。
imagejpeg($dest, “suo_lue_tu.jpg”);追问

其实我是要做一个头像修改功能，用的是jcrop图像剪辑插件，从大图上选择一片区域，然后这片区域固定的输出在一个width：100px，height：100px的区域中，我现在就是想获得这个区域的源文件图片，例如显示的小图片

追答

这个前端比较复杂，如果是js截图，要生成几个新div，一个半透明黑色遮罩，一个全透明的截图div
这个div还要能拖拽大小，拖动位置。还要判定它不能移出图片范围等等。如果完全自己写代码很长。但是如果用jquery和它的div拖拽插件，也不算非常难。
服务器端简单，跟上面我给的代码一样，但是把小图片的相对坐标ajax送到服务器，然后服务器根据坐标在
imagecopyresized($dest, $source, 0, 0, 0, 0, 100, 100, $old_width, $old_height);
本来是4个0的，改成相应坐标。

如果是flash端的那是相当复杂，操作界面比JS容易构成，但是图片处理是flash自己生成的，主要用到geom类，net类，filelist类，BitmapData、JPGEncoder ，等等，还要加做上传功能，各种事件绑定，错误反馈。
不过这样一来服务器用不着做任何事情跟普通的文件上传一样处理就可以，节约了服务器资源。

Answer 2

下次不加overflow的时候，用php控制一下，输出
100px以外的就可以了。
例如你div可以控制显示的起点的
你把起点定位到100px

Answer 3

必须用后台才能。
如在php中使用 imagecreatefrompng、imagecreatefromgif函数来载入图像，然后再操作它们的宽高并保存为另一个图片即可。

Answer 4

大概思路是 你用js或是jquery获取图片的SRC就行了。