如何在jquery/php中获取图像的一部分？

假设我有一个图像

它的尺寸是

高度：150px
宽度：100px

我想得到它的一部分，比如说全高，但宽度在

30-80px

之间。就这样吧

高度：150px
宽度：100px

我不想扩大规模。我想从里面切一部分。（感谢您的编辑，这叫做裁剪）

---

怎么做？

jQuery不能像那样修改图像元素。最好的选择是将其放置在具有

溢出：隐藏的父元素中，以给人留下被剪切的印象。或者您可以使用
clip
CSS规则。如果您真的想创建一个新映像，可以使用jQuery收集映像上的坐标，并将这些坐标修补回服务器端脚本，以实际完成繁重的工作，并异步向下馈送新映像。
jQuery无法修改像这样的映像元素。最好的选择是将其放置在具有
溢出：隐藏的父元素中，以给人留下被剪切的印象。或者您可以使用
clip
CSS规则。如果你真的想制作一个新的图像，你可以使用jQuery来收集图像上的坐标，并将这些坐标修补回服务器端脚本，以实际完成繁重的工作，并异步地向下传送新图像。
图像编辑超出了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;
}


#imgwrapper{
宽度：100px；
高度：50px；
溢出：隐藏；
位置：相对位置；
}
#imgwrapper-img{
位置：绝对位置；
顶部：-30px；
左：0；
}

请注意，使用此解决方案，内部图像是绝对定位的，而外部div是相对定位的，这可能比绝对定位和剪辑图像更适合您的页面布局。
图像编辑超出了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;
}


#imgwrapper{
宽度：100px；
高度：50px；
溢出：隐藏；
位置：相对位置；
}
#imgwrapper-img{
位置：绝对位置；
顶部：-30px；
左：0；
}

请注意，使用此解决方案，内部图像是绝对定位的，而外部div是相对定位的，这可能比绝对定位和剪辑的ped图像更适合您的页面布局。
我认为您最好尝试使用html画布





两者都允许渲染源图像的一部分，getImageData（）函数还允许读回图像数据并对其进行操作（用于整个图像或部分图像）。
我认为最好尝试使用html画布





两者都允许渲染源图像的一部分，getImageData（）函数还允许读回图像数据并对其进行操作（对于整个图像或部分图像）。
有（鲜为人知的）css属性，尽管它确实要求被剪裁的元素为position:absolute；（真可惜）：

有一个css属性（有点鲜为人知），尽管它确实要求被剪裁的元素是position:absolute；（真可惜）：