Комментарий: В прошлом, если вы хотите отображать изображения в сети в Интернете, вы можете только вручную использовать программное обеспечение для изображения для преобразования их. Но теперь этот процесс может быть достигнут с помощью холста HTML5, без необходимости использовать программное обеспечение для редактирования изображений
В прошлом, если вы хотите отображать изображения в сериале в Интернете, вы можете использовать только вручную для их преобразования программного обеспечения для их обращения. Но теперь этот процесс может быть достигнут с помощью холста HTML5 без необходимости использовать программное обеспечение для редактирования изображений. Я использовал HTML5 и jQuery, чтобы сделать демонстрацию, чтобы показать, как реализовать эту функцию.Цель
Эта демонстрация покажет вам, как переключаться между изображением серого и исходным изображением при перемещении мыши на изображении с помощью HTML5 и jQuery. Прежде чем появиться HTML5, чтобы реализовать эту функцию, необходимо подготовить два изображения, одно изображение серого и одно оригинальное изображение. Но теперь он может быть достигнут быстрее и проще с HTML5, потому что изображения серого срабатывания генерируются непосредственно на исходном изображении. Я надеюсь, что этот код JS будет полезен при создании функций отображения файлов или изображения.
Диаграмма воспроизведения
jQuery Code
Следующий код jQuery будет искать целевое изображение и генерировать версию серого. Когда вы перемещаете свою мышь на картинку, картинка серого цвета превратится в основной цвет.
<script src = "jquery.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
// Установите событие загрузки окна, чтобы дождаться загрузки всех изображений перед запуском
$ (window) .load (function () {
// Сделайте изображение постепенно ввести, чтобы исходное изображение с цветом не было отображаться, а затем выполнить событие загрузки окна
$ (". ITEM IMG"). FADEIN (500);
// скопировать картинку
$ ('. item img'). why (function () {
var el = $ (это);
el.css ({"position": "absolute"}).
var el = $ (это);
el.parent (). css ({"width": this.width, "height": this.height});
el.dequeue ();
});
this.src = greyscale (this.src);
});
// Сделать картину постепенно ввести
$ ('. item img'). mouseover (function () {
$ (this) .parent (). find ('img: First'). Stop (). Animate ({opacity: 1}, 1000);
})
$ ('. img_grayscale'). Mouseout (function () {
$ (this) .stop (). Animate ({opacity: 0}, 1000);
});
});
// Сделать серые картинки с холстом
Функция GreyScale (src) {
var canvas = document.createElement ('canvas');
var ctx = canvas.getContext ('2d');
var imgobj = новое изображение ();
imgobj.src = src;
canvas.width = imgobj.width;
Canvas.height = imgobj.height;
ctx.drawimage (imgobj, 0, 0);
var imgpixels = ctx.getimagedata (0, 0, canvas.width, canvas.height);
for (var y = 0; y <imgpixels.height; y ++) {
for (var x = 0; x <imgpixels.width; x ++) {
var i = (y * 4) * imgpixels.width + x * 4;
var avg = (imgpixels.data [i] + imgpixels.data [i + 1] + imgpixels.data [i + 2]) / 3;
imgpixels.data [i] = avg;
imgpixels.data [i + 1] = avg;
imgpixels.data [i + 2] = avg;
}
}
ctx.putimagedata (imgpixels, 0, 0, 0, imgpixels.width, imgpixels.height);
вернуть canvas.todataurl ();
}
</script>
Как использовать
Следуйте шагам ниже:
Цитата jQuery.js
Скопируйте приведенный выше код
Установите целевое изображение (например,.
Вы также можете установить скорость анимации (т.е. 1000 = 1 секунда)
совместимость
Я попробовал все браузеры, которые поддерживают HTML5 и Canvas, такие как: Chrome, Safari и Firefox. Если это браузер, который не поддерживает HTML5, он будет использовать только исходное изображение и не будет генерировать изображения серого.
Примечание. Если локальный HTML -файл не может работать на Firefox и Chrome, вам необходимо развернуть файл HTML на сервер.
Самооценка
Я сам проверил это в соответствии с учебником и нашел кое -что, на что нужно обратить внимание. Я открыл страницу с Firefox. Программа не может работать правильно, но она может работать после развертывания соответствующего кода на сервер.
Это должно быть гарантированно, чтобы быть локальным изображением, в противном случае вы должны сообщить об ошибке безопасности.
Это потому, что::
Canvas является элементом Canvas в стандарте HTML5 и может использоваться для рисования 2D и 3D -изображений.
Тем не менее, легко столкнуться с проблемами ошибок безопасности во время отладки.
В настоящее время ошибки безопасности, с которыми я столкнулся во время отладки в основном, появляются на ToDataurl () и SRC.
Ошибка безопасности указывает на то, что этот код не имеет семантических проблем, но он не может работать нормально по соображениям безопасности.
Ситуация с ошибкой безопасности.
Использование междоменных изображений в холсте
Отладка в местной без серверной среде
Невозможно получить взаимосвязь между текущим доменом и изображением
Некоторые из решений, найденных на Stackoverflow, обычно позволяют вам решить проблемы с междоменом.
Но на самом деле, если вы не используете серверное программное обеспечение во время локальной отладки, это также вызовет эту проблему.
Например: функция Todataurl используется во время локальной отладки, а локальный файл изображения используется в холсте. В Chrome и Firefox ошибка безопасности все еще будет выбрана.
Общее решение - настроить серверную среду локально или отправить контент на сервер для отладки.