Программно клип/вырезать изображение с помощью Javascript

Ответ 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);

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