Как получить часть изображения в jquery/php?

Question

давайте говорить, что у меня есть изображение

размер Это является

высота: 150px
ширина: 100px.

Я хочу получить его часть, скажем, полную высоту, но с шириной между 30-80px. таким образом это будет

высота: 150px
ширина: 100px.

Я не хочу его масштабировать. Я хочу отрезать часть от него. (спасибо за редактирование, это называется обрезкой).

Как это сделать?

Answer 1

Существует (несколько малоизвестный) clip свойство css, хотя оно требует, чтобы элемент, обрезанный, был положением: абсолютным; (Который является позором):

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

Reference

Answer 2

jQuery не может изменять элементы изображения, подобные этому. Лучше всего было бы разместить его в родительском элементе, который имеет overflow:hidden, чтобы создать впечатление, которое оно разрезает. Или вы можете использовать правило CSS clip. Если вы действительно хотели создать новое изображение, вы можете использовать jQuery для сбора координат изображения и исправления их обратно на серверный скрипт, чтобы фактически выполнять тяжелую работу и подавать новое изображение асинхронно.

Answer 3

Редактирование изображений выходит за рамки 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; 
} 

Обратите внимание, что с этим решением, внутреннее изображение является absolute LY позиционируется, но внешний DIV является relative LY позиционированного , что может подойти вашему макету страницы лучше, чем абсолютно позиционированное изображение и clip.

Answer 4

Я думаю, что лучше всего попробовать использовать холст html.

• http://www.w3schools.com/html5/canvas_drawimage.asp
• http://www.w3schools.com/html5/canvas_getimagedata.asp

Оба позволяют для визуализации части исходного изображения, функция getImageData() также позволяет считывать обратно данные изображения и манипулировать ею (для всего изображения или его части его).