Создание размытого изображения в javascrpt

Я хочу создать размытое изображение из обычного изображения. Я искал в Интернете и узнал, что люди сделали это, поместив свойство фильтра CSS через javascript на изображение, чтобы сделать его размытым. Но его можно удалить, проверив страницу, а я этого не хочу.

Я хочу создать размытую версию изображения через javascript. Я думаю, что могу сделать это с холстом, но я никогда не работал с холстом, и любая помощь будет высоко оценена (:

Но его можно удалить, проверив страницу, а я этого не хочу. то же самое относится к Javascript.
Lain 05.04.2022 13:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
40
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Причина этого в том, что если вы хотите размыть его с помощью JavaScript, вам нужно отправить неразмытое изображение. А если вы отправляете неразмытое изображение, они могут легко извлечь его из вкладки сети, даже если вы никогда не добавляли его напрямую в DOM. Все, что вы используете в качестве входных данных для JavaScript, может быть получено достаточно умным пользователем.

Если вы хотите, чтобы пользователь никогда не мог видеть оригинал, а только размытие, вам придется размыть его на стороне сервера.

Если по какой-то странной причине вы согласны с этим и все еще хотите размыть его на холсте, вам нужно выбрать и реализовать алгоритм размытия для холста. Существует множество различных алгоритмов размытия на выбор. Вероятно, наиболее распространенным будет Размытие по Гауссу.

Алгоритм не супер безумный, но и не супер простой, и я бы рекомендовал вместо этого использовать библиотеку, такую ​​как эта: размытие. Я не использовал его напрямую, поэтому не могу поручиться за него, но у него полмиллиона загрузок в неделю на NPM, так что, вероятно, он довольно надежный.

Спасибо за объяснение. Я не хочу использовать какую-либо библиотеку для этого во внешнем интерфейсе, поэтому я просто попрошу внутреннего разработчика вместо этого дать мне размытое изображение.

Ghayas Ud Din 05.04.2022 13:20
Ответ принят как подходящий

Простые фильтры

Вы можете применить размытие через холст, используя ctx.filter. CanvasRenderingContext2D.filter будет принимать (ограниченный набор) фильтров, определенных как строки. Например ctx.filter = "blur(10px)";

См. ctx.фильтр набор фильтров, которые вы можете использовать напрямую.

Пример

Пример использует CanvasRenderingContext2D.filter для размытия изображения с течением времени.

const img = new Image;
img.src = "https://i.stack.imgur.com/C7qq2.png?s=256&g=1";
img.addEventListener("load", () => requestAnimationFrame(uodate));
function drawImageBlur(img, blurAmount) {
   const ctx = can.getContext("2d");
   ctx.clearRect(0,0,128,128);
   ctx.filter = "blur(" + blurAmount+ "px)";
   ctx.drawImage(img, 128 - img.naturalWidth * 0.5, 128 - img.naturalHeight * 0.5);
}
var frameCount = 0;
function uodate(time) {
  if (frameCount++ % 10 === 0) {  // no point burning CPU cycles so only once every 10 frames
      drawImageBlur(img, Math.sin(time / 1000) * 5 + 6);
  }
  requestAnimationFrame(uodate);
}
canvas {border: 1px solid black;}
<canvas id = "can" width = "256"  height = "256"></canvas>

Невозможно защитить изображение от проверки, если вы применяете размытие изображения на клиенте (независимо от того, какой метод вы используете). Если вы хотите запутать (размыть) изображение, это должно быть сделано на сервере.

Другие вопросы по теме