Программно клип/вырезать изображение с помощью Javascript
Есть ли какие-либо документы/учебные пособия о том, как обрезать или вырезать большое изображение, чтобы пользователь видел только небольшую часть этого изображения? Пусть говорят, что исходное изображение - это 10 кадров анимации, уложенных в конец, так что он действительно широк. Что мне делать с Javascript для отображения только одного произвольного кадра анимации за раз?
Я изучил эту технику "CSS Sprite", но я не думаю, что могу использовать ее здесь. Исходное изображение создается динамически с сервера; Я не буду знать общую длину или размер каждого кадра, пока он не вернется с сервера. Я надеюсь, что смогу сделать что-то вроде:
var image = getElementByID('some-id');
image.src = pathToReallyLongImage;
// Any way to do this?!
image.width = cellWidth;
image.offset = cellWidth * imageNumber;
Ответы
Ответ 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(…)
может быть вызвана в любое время, чтобы изменить, какая часть изображения отображается.
Ответ 2
В ответ на:
Увы, 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 script исходные свойства высоты и ширины исходного изображения (а не тот, который указан как фон.
В ответ на:
Свойства ширины/высоты объекта изображения документа считаны только для чтения. Однако, если вы могли бы их изменить, вы бы только хлюпали фреймами, а не обрезали фреймы так, как хотите. Вид обработки изображений, который вы хотите, не может быть выполнен с помощью 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 слишком медленная.)
Спасибо за приведенный выше script Я изменил и внедрил на http://morethanvoice.net/m1/reader13.php (щелчок правой кнопкой мыши... с помощью мыши) в IE, но, как вы заметите, обработка изображений mousemove слишком быстро для старого стилизованного IE, отображает позицию, но только после изображения. В любом случае любая хорошая идея приветствуется.
Спасибо всем за ваше внимание, надеюсь, что приведенные выше коды помогут кому-то...
Клаудио Клемп
http://morethanvoice.net/m1/reader13.php
Ответ 3
CSS также определяет стиль для отсечения. См. Свойство clip в спецификациях CSS.
Ответ 4
Увы, JavaScript просто не способен извлечь свойства изображения, которые вам потребуются, чтобы сделать что-то вроде этого. Тем не менее, может быть спасение в виде элемента HTML <canvas> в сочетании с небольшим количеством серверных скриптов.
PHP-код для извлечения ширины и высоты очень большого изображения:
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
Здесь вы затем загрузите изображение в элемент <canvas> , пример которого документирован здесь. Теперь моя теория заключалась в том, что вы можете извлекать данные пикселей из элемента <canvas> ; предполагая, что вы можете, вы просто убедитесь, что у вас есть определенный вид разделителя между кадрами большого изображения и затем найдите его внутри холста. Скажем, вы нашли разделитель 110 пикселей слева от изображения; вы бы знали, что каждый "кадр" был 110 пикселей в ширину, и вы уже получили полную ширину, хранящуюся в переменной PHP, поэтому расшифровка того, сколько изображения вы работаете, было бы легким.
Единственный спекулятивный аспект этого метода заключается в том, способен ли JavaScript извлекать данные цвета из указанного местоположения в изображении, загруженном в элемент <canvas> ; если это возможно, то то, что вы пытаетесь выполнить, вполне возможно.
Ответ 5
Свойства ширины/высоты объекта изображения документа считаны только для чтения. Однако, если вы могли бы их изменить, вы бы только хлюпали фреймами, а не обрезали фреймы так, как хотите. Вид обработки изображений, который вы хотите, не может быть выполнен с помощью javascript на стороне клиента. Я предлагаю разрезать изображения на сервере или наложить div на изображение, чтобы скрыть части, которые вы не хотите отображать.
Ответ 6
То, что написано, по существу, позиционирует DIV внутри DIV, который имеет переполнение: hidden. Вы можете сделать то же самое, все, что вам нужно сделать, - изменить внешний DIV в зависимости от размера каждого кадра большего изображения. Вы можете сделать это в коде легко.
Вы можете просто установить внутренний стиль DIV:
left: (your x-position = 0 or a negative integer * frame width)px
Большинство JavaScript Framework делают это довольно просто.
Ответ 7
Я предполагаю, что вы хотите сделать миниатюру для своего изображения. Вы можете использовать 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>
для более информация
Ответ 8
попробуйте использовать haxcv-библиотеку haxcv js простыми функциями
перейдите в https://docs.haxcv.org/Methods/cutImage, чтобы узнать больше о его библиотеке
var Pixels = _("img").cutImage (x , y , width , height );
_ ( "img" ). src (Pixels.src);
//возврат изображения
но сначала попробуйте включить библиотеку