使用 javaScript 使图像模糊

Question

我正在编写 JavaScript 代码来上传、预览、模糊和下载结果图像。目前我已经完成上传和预览代码。之后，如何把它弄模糊并下载呢？

    <section class="upload" id="upload">
        <h3>UPLOAD</h3>
      
      <div class="container">
        <div class="row">
          
          <canvas id="c" class="p-3" >Here's the canvas.</canvas>
          <br>
          <input type="file" id="infile" accept = "image/*" onchange="handleFiles(this.files)">
          <p><img id="output" /></p>
          <button class="btnbl">Blur Image</button>
          <br>
       </div>
     </div>
 
</section>

document.getElementById('infile').onchange = function(e) {
          var img = new Image();
          img.onload = draw;
          img.onerror = failed;
          img.src = URL.createObjectURL(this.files[0]);
        };
        function draw() {
          var canvas = document.getElementById('c');
          canvas.width = this.width;
          canvas.height = this.height;
          var ctx = canvas.getContext('2d');
          ctx.drawImage(this, 0,0);
        }
        function failed() {
          console.error("The provided file couldn't be loaded as an Image media");
        }

Answer 1

这是我在 Whosebug 上的第一个答案，我是 Web 开发的初学者，所以如果我错了请原谅我并纠正我，这对我也有帮助。

我不知道如何在 Js 中做到这一点，但在 CSS 中它是这样工作的。

您可以像在 Glassmorphism 中一样使用 CSS 来实现模糊效果。属性：背景滤镜：模糊（2rem）； blur 中传递的参数将定义您想要的模糊量。设置得越多，模糊效果就越好属性。

Answer 2

将 onclick="blurimg()" 添加到您的模糊按钮。然后添加这个 javascript.

function blurimg(){
            document.getElementById("c").style.filter="blur(5px)"
        }

请注意，我已经模糊处理 canvas( id="c")

您可以根据自己的选择增加或减少模糊度(5px)

使用 javaScript 使图像模糊

Making image Blur Using javaScript

html

javascript

canvas

blur

web