在javascript中创建模糊图像

Question

我想从正常图像生成模糊图像。我在互联网上搜索过，发现人们通过在图像上放置 CSS 滤镜属性到 javascript 来使其模糊。但是可以通过检查页面将其删除，我不希望这样。

我想通过javascript生成一个模糊版本的图像。我想我可以用 canvas 来做，但我从来没有用过 canvas ，任何帮助将不胜感激 (:

Answer 1

因此，这取决于。如果您担心他们会使用开发人员工具将其删除，那么答案可能是“您不能”。

这样做的原因是，如果您想用 JavaScript 对其进行模糊处理，您需要发送未模糊处理的图像。而且，如果您发送清晰的图像，他们可以轻松地将其从网络选项卡中挖出，即使您从未将其直接添加到 DOM。足够聪明的用户可以获得您用作 JavaScript 输入的任何内容。

如果您希望用户永远看不到原始内容，只能看到模糊的内容，则必须对其进行模糊处理 server-side。

如果出于某种奇怪的原因，您对此表示满意，但仍想在 canvas 中对其进行模糊处理，则需要为 canvas 选择并实施模糊算法。有许多不同的模糊算法可供选择。可能最常见的是 Gaussian blur.

算法不是超级疯狂，但也不是非常简单，我建议改用库，例如这个：glur。我没有直接使用过那个，所以不能保证它，但它在 NPM 上每周有 50 万次下载，所以可能非常可靠。

Answer 2

简单过滤器

您可以使用 ctx.filter 通过 canvas 应用模糊。 CanvasRenderingContext2D.filter 将接受定义为字符串的（有限的一组）过滤器。例如ctx.filter = "blur(10px)";

请参阅 ctx.filter 了解可直接使用的过滤器集。

例子

示例使用 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>

如果您在客户端应用图像模糊（无论您使用什么方法），都无法保护图像不被检查。如果你想混淆（模糊）图像，它必须在服务器上完成。

在javascript中创建模糊图像

Creating a blurred image in javascrpt

javascript

image

html5-canvas

简单过滤器

例子