Я хочу создать размытое изображение из обычного изображения. Я искал в Интернете и узнал, что люди сделали это, поместив свойство фильтра CSS через javascript на изображение, чтобы сделать его размытым. Но его можно удалить, проверив страницу, а я этого не хочу.
Я хочу создать размытую версию изображения через javascript. Я думаю, что могу сделать это с холстом, но я никогда не работал с холстом, и любая помощь будет высоко оценена (:
Итак, это зависит. Если вы беспокоитесь о том, что они удалят его с помощью инструментов разработчика, то ответ, вероятно, «вы не можете».
Причина этого в том, что если вы хотите размыть его с помощью JavaScript, вам нужно отправить неразмытое изображение. А если вы отправляете неразмытое изображение, они могут легко извлечь его из вкладки сети, даже если вы никогда не добавляли его напрямую в DOM. Все, что вы используете в качестве входных данных для JavaScript, может быть получено достаточно умным пользователем.
Если вы хотите, чтобы пользователь никогда не мог видеть оригинал, а только размытие, вам придется размыть его на стороне сервера.
Если по какой-то странной причине вы согласны с этим и все еще хотите размыть его на холсте, вам нужно выбрать и реализовать алгоритм размытия для холста. Существует множество различных алгоритмов размытия на выбор. Вероятно, наиболее распространенным будет Размытие по Гауссу.
Алгоритм не супер безумный, но и не супер простой, и я бы рекомендовал вместо этого использовать библиотеку, такую как эта: размытие. Я не использовал его напрямую, поэтому не могу поручиться за него, но у него полмиллиона загрузок в неделю на NPM, так что, вероятно, он довольно надежный.
Спасибо за объяснение. Я не хочу использовать какую-либо библиотеку для этого во внешнем интерфейсе, поэтому я просто попрошу внутреннего разработчика вместо этого дать мне размытое изображение.
Вы можете применить размытие через холст, используя 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>
Невозможно защитить изображение от проверки, если вы применяете размытие изображения на клиенте (независимо от того, какой метод вы используете). Если вы хотите запутать (размыть) изображение, это должно быть сделано на сервере.