Программно обрезать / вырезать изображение, используя Javascript

Question

Существуют ли какие-либо документы / учебные пособия о том, как вырезать или вырезать большое изображение, чтобы пользователь видел только небольшую часть этого изображения? Допустим, исходное изображение состоит из 10 кадров анимации, сложенных вплотную, так что оно действительно широкое. Что я мог сделать с Javascript, чтобы отображать только 1 произвольный кадр анимации за раз?

Я изучил эту технику "CSS Spriting", но не думаю, что смогу использовать ее здесь. Исходное изображение генерируется динамически с сервера; Я не буду знать общую длину или размер каждого кадра, пока он не вернется с сервера. Я надеюсь, что смогу сделать что-то вроде:

var image = getElementByID('some-id');

image.src = pathToReallyLongImage;

// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;

Answer 1

Это можно сделать, поместив ваше изображение в div "viewport". Установите ширину и высоту на div (в соответствии с вашими потребностями), затем установите position: relative и overflow: hidden на нем. Абсолютно разместите свое изображение внутри него и измените положение, чтобы изменить отображаемые части.

Чтобы отобразить фрагмент изображения 30x40, начиная с (10,20):

<style type="text/css">
    div.viewport {
        overflow: hidden;
        position: relative;
    }

    img.clipped {
        display: block;
        position: absolute;
    }
</style>

<script type="text/javascript">
    function setViewport(img, x, y, width, height) {
        img.style.left = "-" + x + "px";
        img.style.top  = "-" + y + "px";

        if (width !== undefined) {
            img.parentNode.style.width  = width  + "px";
            img.parentNode.style.height = height + "px";
        }
    }

    setViewport(document.getElementsByTagName("img")[0], 10, 20, 30, 40);
</script>

<div class="viewport">
    <img class="clipped" src="/images/clipped.png" alt="Clipped image"/>
</div>

Общие свойства CSS связаны с классами, так что вы можете иметь несколько окон просмотра / вырезанных изображений на вашей странице. Функцию setViewport(…) можно вызвать в любое время, чтобы изменить отображаемую часть изображения.

Answer 2

В ответ на:

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

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

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

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

Это генерирует новое изображение из существующего и таким образом записывает в java-сценарии исходные свойства высоты и ширины исходного изображения (не идентифицированные как фон.

В ответ на:

Свойства ширины / высоты объекта изображения документа доступны только для чтения. Однако, если бы вы могли изменить их, вы бы только раздавили кадры, а не разрезали кадры, как вам хотелось бы. Вид манипуляции с изображением, который вы хотите, не может быть выполнен с помощью клиентского 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 слишком медленная для этого.)

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

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

Клаудио Клемп http://morethanvoice.net/m1/reader13.php

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

Полагаю, вы хотите взять миниатюру для вашего изображения. Вы можете использовать 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>

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

Answer 7

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

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

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

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

Answer 8

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