Лучший способ отобразить часть изображения, определенную координатами x + y?

Question

Итак, у меня есть множество записей базы данных, каждая из которых имеет связанный файл изображения, а координаты X и Y указывают, к какой конкретной части файла изображения он относится. См. Изображение и столбцы x1 / y1 / x2 / y2 ниже

|  idx | code   | ref        | imagesub | image      | x1   | y1   | x2   | y2   |
-------+--------+------------+----------+------------+------+------+------+------+
| 5997 | MDX    | 1,1        | 1        | 02.png     |  38  |  216 |  717 |  436 |
| 5998 | MDX    | 1,2        | 1        | 02.png     |  38  |  375 |  720 |  478 |
| 5999 | MDX    | 1,3        | 1        | 02.png     |  38  |  448 |  709 |  597 |

У меня есть страница Django для каждой записи, и я хотел бы отобразить только соответствующий бит изображения - например, для записи 5997 я хотел бы отобразить только часть 02.png: (38 216) - (717 436).

Какой лучший способ сделать это? Есть ли умный способ сделать это, используя какую-то библиотеку JavaScript?

Или я должен написать сценарий, чтобы сначала самостоятельно нарезать изображения, затем переименовать их и отобразить меньшие изображения?

Альтернативой может быть отображение всего изображения, но выделение какого-либо выделения или рамки вокруг соответствующих битов - если это возможно с использованием JQuery или чего-то подобного?

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

Итак:

1. возможно ли отобразить только часть изображения с помощью JS: и
2. возможно ли выделить часть изображения, также с помощью JS?

РЕДАКТИРОВАТЬ:

плагин jQuery Image Annotation выглядит хорошо для Q2, может быть?

Answer 1

На самом деле есть довольно простой способ сделать это, не думайте с точки зрения <img>, думайте вместо background или background-image ( свойства CSS ).

Я не могу точно сказать, как выглядит ваш код, не зная вашей платформы, но если, скажем, у вас есть свойства, доступные на странице, я могу показать вам jQuery, например:

//for (38,216) to (717,436)
var img = { x1: 38, x2: 717, y1: 216, y2: 436, url: "02.png" };

КогдаВы можете просто отобразить изображение, скажем, <div id="myImage"></div>, например:

$("#myDiv").css({
  width: img.x2 - img.x1,
  height: img.y2 - img.y1,
  background: "url('" + img.url + "')",
  backgroundPosition: -img.x1 + "px " + -img.y1 + "px"
});

Демонстрацию можно посмотреть здесь , еще одно побочное преимущество этого в том, что пользователь (для вашего примера) будет загружать 02.png только один раз, но использовать его несколько раз из кэша.Для получения дополнительной информации термин, который описывает этот / обычно используемый, CSS-спрайтов , есть множество статей вокруг этого .

Если это не нужнобудьте динамичны, вы, конечно, можете вынести все эти свойства напрямую в атрибут style <div> напрямую, я просто не совсем уверен, где работа должна быть выполнена (клиент против сервера) здесь.

Answer 2

Лучший способ сделать это - определенно CSS с помощью техники, называемой CSS-спрайтов (в основном это то же самое, что MooGoo поддерживает).Нет смысла прибегать к javascript, когда решение CSS будет гораздо более широко поддерживаться браузерами.

Единственные причины для фактического разделения изображения на сервере могут быть, если ваше изображение было очень большим и отдельные битывы хотели, чтобы отображение было небольшим - иначе вы фактически увидите выигрыш в производительности от обслуживания того же изображения, поскольку оно будет кэшироваться в браузере клиента после первоначального запроса.

Answer 3

Вероятно, лучше всего обрезать изображения на стороне сервера независимо. С одной стороны, это единственный способ сократить время загрузки, и он обходит любые проблемы совместимости браузера или отключенные проблемы JavaScript. Кроме того, это относительно просто, особенно если вы можете использовать Imagemagick, и если вам нужно будет изменить размер изображения, качество будет лучше и стабильнее.

Но что касается ваших вопросов, да и да.

На самом деле вам вообще не нужен JavaScript, CSS должен делать эту работу (хотя я думаю, что это будет справедливо почти для всех манипуляций с макетом страницы ...). Ключ не должен использовать элемент <img>, поскольку изменение размера также масштабирует и искажает изображение, прикрепленное к нему. Используйте любой общий элемент, даже <a>, если вы хотите, чтобы изображение было кликабельным:

a#image {
  display: block;
  background-image: url(someimage.png);
  background-position: 100px 250px;
  width: 500px;
  height: 700px;
}

Довольно простые вещи, не должно иметь особых проблем с совместимостью с браузером (хотя не цитируйте меня об этом).

Если вы хотите выделить область изображения, вы можете поместить элемент <span> в изображение, содержащее элемент, и оформить его следующим образом:

a#image span {
  position: absolute;
  top: 30px;
  left: 50px;
  width: 10px;
  height: 10px;
  background-color: orange;
  opacity: .7;
  display: block;
}

/* And make sure the containing image element has the right 'position' */
a#image { position: relative; }

Все это не в моей голове, так что вам, возможно, придется поэкспериментировать, но идея есть.

Если вам не нужно изменять размер изображения или сохранять полосу пропускания, и вы ожидаете, что пользователи будут часто просматривать полноразмерное изображение, настройка таких стилей с помощью JavaScript может быть полезной. Тем не менее, в большинстве случаев манипуляции с изображениями на стороне сервера - это путь.