Как извлечь маленькие изображения из большого изображения с помощью javascript? [Дубликат]

То, что написано, по существу, позиционирует DIV внутри DIV, который имеет переполнение: скрытое. Вы можете сделать то же самое, все, что вам нужно сделать, - изменить внешний DIV в зависимости от размера каждого кадра большего изображения. Вы можете сделать это в коде легко.

Вы можете просто установить стиль внутренней DIV:

left: (your x-position = 0 or a negative integer * frame width)px

Большинство JavaScript-фреймворков делают это довольно легко.

CSS также определяет стиль для отсечения. См. Свойство clip в спецификациях CSS.

Предположим, вы хотите сделать миниатюру для своего изображения. Вы можете использовать ImageThumbnail.js, созданные из библиотеки прототипов следующим образом:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ImageThumbnail.js"></script>
<input type="file" id="photo">
<img src="empty.gif" id="thumbnail" width="80" height="0">
<script type="text/javascript">
<!--
    new Image.Thumbnail('thumbnail', 'photo');
//-->
</script>

для получения дополнительной информации

Свойства ширины / высоты объекта изображения документа считаны только. Однако, если вы могли бы их изменить, вы бы только хлюпали фреймами, а не обрезали фреймы так, как хотите. Вид обработки изображений, который вы хотите, не может быть выполнен с помощью javascript на стороне клиента. Я предлагаю разрезать изображения на сервере или наложить div на изображение, чтобы скрыть части, которые вы не хотите отображать.

Увы, JavaScript просто не способен извлечь свойства изображения, которые вам потребуются, чтобы сделать что-то вроде этого. Тем не менее, может быть спасение в виде элемента HTML & lt; canvas> в сочетании с небольшим количеством серверных скриптов.

PHP-код, чтобы развести ширину и высоту действительно большого изображения:

<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>

Здесь вы затем загрузите изображение в элемент & lt; canvas>, пример которого задокументирован здесь . Теперь моя теория заключалась в том, что вы можете извлекать данные пикселей из элемента & lt; canvas>; предполагая, что вы можете, вы просто убедитесь, что у вас есть определенный вид разделителя между кадрами большого изображения и затем найдите его внутри холста. Предположим, вы нашли разделитель 110 пикселей слева от изображения; вы бы знали, что каждый «кадр» был 110 пикселей в ширину, и вы уже получили полную ширину, хранящуюся в переменной PHP, поэтому расшифровка того, сколько изображения вы работаете, было бы легким.

Единственный спекулятивный аспект этого метода заключается в том, способен ли JavaScript извлекать данные цвета из указанного местоположения в изображение, загруженное в элемент & lt; canvas>; если это возможно, то то, что вы пытаетесь выполнить, вполне осуществимо.

попробуйте использовать haxcv-библиотеку haxcv js с помощью простых функций

перейдите к https://docs.haxcv.org/Methods/cutImage , чтобы узнать больше о его библиотеке

var Pixels = _("img").cutImage (x , y , width , height  );

_ ("img"). src (Pixels.src);

// возвращать обрезанное изображение, но сначала попробуйте включить библиотеку

В ответ на:

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

< ? (open php) 
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
(close php) ? >

Это можно сделать в Javascript, просто google:

var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width  = newimage.width;

Это создает новое изображение из существующего и фиксирует этот путь в java сценарий исходных свойств высоты и ширины исходного изображения (а не один id'ed в качестве фона.

В ответ на:

Свойства ширины / высоты объекта изображения документа Однако, если вы можете их изменить, вы бы только хлюпали фреймами, а не обрезали фреймы так, как вы этого хотите. Вид манипуляции с изображениями, который вы хотите, не может быть выполнен с помощью javascript на стороне клиента. Я предлагаю разрезать изображения вверх на сервере или наложить div на изображение, чтобы скрыть части, которые вы не хотите отображать.

...

var newimage = new Image();
newimage.src = document.getElementById('background').src;
var height = newimage.height;
var width  = newimage.width;
newimage.style.height = '200px';
newimage.style.width = '200px';
newimage.height = '200px';
newimage.width = '200px';

и если хотите:

newimage.setAttribute('height','200px');

В определенных обстоятельствах требуется удвоить newimage.style.height и newimage.height, чтобы убедиться, что IE будет понимать вовремя, что изображение будет изменено (вы собираетесь отобразить вещь сразу после этого, и внутренний процесс IE ng слишком медленно для этого.)

Спасибо за вышеупомянутый скрипт, который я изменил и внедрил на http://morethanvoice.net/m1/reader13.php (меню правой кнопки мыши. .. mouseover zoom lent) корректно даже в IE, но, как вы заметили, обработка изображений mousemove слишком быстра для старого IE, отображающего позицию, но только после изображения. В любом случае любая хорошая идея приветствуется.

Спасибо всем за ваше внимание, надеюсь, что приведенные выше коды помогут кому-то ...

Claudio Klemp http: // morethanvoice.net/m1/reader13.php