0

假设我有一张图片

它的大小是

高度：150
像素宽度：100 像素。

我想得到它的一部分，假设是全高，但宽度介于30-80px. 所以它会是

高度：150
像素宽度：100 像素。

我不想扩大规模。我想从中切下一部分。（感谢编辑，这称为裁剪）。

怎么做？

4

4 回答 4

3

有（有点鲜为人知的）clip css 属性，尽管它确实要求被剪辑的元素是 position: absolute; （这是一个耻辱）：

img {
    position: absolute;
    clip: rect(0 100px 200px 0);
    /* clip: shape(top right bottom left); NB 'rect' is the only available option */
}

参考

于 2012-05-08T13:52:29.613 回答
2

jQuery 不能像那样修改图像元素。您最好的选择是将其放置在overflow:hidden必须给人以被剪切的印象的父元素中。或者您可以使用clipCSS 规则。如果你真的想制作一个新图像，你可以使用 jQuery 来收集图像上的坐标并将它们修补回服务器端脚本，以实际执行繁重的工作并异步提供新图像。

于 2012-05-08T13:50:03.827 回答
1

图像编辑超出了 JavaScript 的范围。您只能显示图像的某个部分，但实际上不能更改图像文件：

<div id="imgwrapper"><img src="blah.jpg" width="100" height="150"></div>

#imgwrapper {
    width: 100px;
    height: 50px;
    overflow: hidden;
    position: relative;
}
#imgwrapper img {
    position: absolute;
    top: -30px;
    left: 0;
}

请注意，使用此解决方案，内部图像是absolutely 定位的，而外部 div 是relatively 定位的，这可能比绝对定位和clipped 图像更适合您的页面布局。

于 2012-05-08T13:51:14.063 回答
0

我认为您最好的选择是尝试使用 html 画布。

两者都允许渲染源图像的一部分，getImageData() 函数还允许读回图像数据并对其进行操作（对于整个图像或部分图像）。

于 2012-05-08T13:51:36.947 回答