Программно изображение Клипа/Сокращения с помощью JavaScript
просто удалите пакет из консоли диспетчера пакетов из команды ниже
PM> Uninstall-package Microsoft.CodeDom.Providers.DotNetCompilerPlatform
PM> Uninstall-package Microsoft.Net.Compilers
6 ответов
Это может быть сделано путем включения изображения в отделении "области просмотра". Установите ширину и высоту на отделении (согласно Вашим потребностям), затем установите 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(…) функция может быть вызвана в любое время для изменения, какая часть изображения отображена.
CSS также определяет стиль для отсечения. Посмотрите свойство клипа в спецификациях CSS.
Свойства width/height объекта изображения документа только для чтения. Если бы Вы могли бы изменить их, однако, Вы только хлюпали бы кадры, не сокращать кадры как Вы требование. Вид обработки изображения, которую Вы хотите, не может быть сделан с клиентским JavaScript. Я предлагаю сократить изображения на сервере или накладываю отделение на изображении для сокрытия частей, которые Вы не хотите отображать.
Увы, JavaScript просто не способен к извлечению свойств изображения, которого Вы потребовали бы, чтобы сделать что-то вроде этого. Однако может быть спасение в форме HTML < холст> элемент, объединенный с небольшим количеством сценариев серверной стороны.
PHP кодируют для движения об извлечении ширины и высоты действительно большого изображения:
<?php
$large_image = 'path/to/large_image';
$full_w = imagesx($large_image);
$full_h = imagesy($large_image);
?>
Отсюда, Вы затем загрузили бы изображение в < холст> элемент, пример которого документируется здесь . Теперь, моя теория состояла в том, что Вы можете извлекать пиксельные данные из < холст> элемент; предположение, что Вы можете, Вы просто удостоверились бы, что имели некоторую форму определенного делителя между кадрами большого изображения и затем искали его в холсте. Скажем, Вы нашли делитель 110 пикселями от левых изображения; Вы затем знали бы, что каждый "кадр" был 110 пикселей шириной, и Вы уже сохранили полную ширину в переменной PHP, таким образом дешифровав, сколько изображения, с которым Вы работаете, было бы бризом.
единственный спекулятивный аспект к этому методу - способен ли JavaScript к извлечению цветных данных из указанного местоположения в рамках изображения, загруженного в < холст> элемент; если это возможно, то то, что Вы пытаетесь выполнить, совершенно выполнимо.
То, что делает вытекание сильной струей, по существу располагают абсолютно расположенный DIV в другом DIV, который имеет overflow:hidden. Можно сделать то же, все, что необходимо сделать, изменяют размер внешнего DIV в зависимости от размера каждого кадра увеличенного изображения. Можно сделать это в коде легко.
можно просто установить стиль внутреннего DIV:
left: (your x-position = 0 or a negative integer * frame width)px
Большинство Платформ JavaScript делает это довольно легким.
Я предполагаю, что Вы хотите взять миниатюру для своего изображения. Можно использовать 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>
для больше информация