前端-原生-Canvas-模糊滤镜

已于 2023-11-08 11:27:53 修改
阅读量686 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript css3 css
于 2022-05-25 12:07:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35099224/article/details/124963632
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas创意</title>
    <script src="../libs/StackBlur.js"></script>

    <style>
      body {
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <!-- 毛玻璃 -->
    <div>
      <canvas id="canvas-blur"></canvas>
    </div>

    <script type="text/javascript">
      (function () {
        //毛玻璃
        let blurStack = new BlurStack();
        let canvasBlur = document.getElementById("canvas-blur");
        blurStack.stackBlurImage(
          canvasBlur,
          "https://file.idongjia.cn/T3aBW_BmDT1RCvBVdK.png",
          10,
          true
        );
      })();
    </script>
  </body>
</html>

class BlurStack {
  constructor() {
    this.r = 0;
    this.g = 0;
    this.b = 0;
    this.a = 0;
    this.next = null;
    this.mul_table = [
      512, 512, 456, 512, 328, 456, 335, 512, 405, 328, 271, 456, 388, 335, 292,
      512, 454, 405, 364, 328, 298, 271, 496, 456, 420, 388, 360, 335, 312, 292,
      273, 512, 482, 454, 428, 405, 383, 364, 345, 328, 312, 298, 284, 271, 259,
      496, 475, 456, 437, 420, 404, 388, 374, 360, 347, 335, 323, 312, 302, 292,
      282, 273, 265, 512, 497, 482, 468, 454, 441, 428, 417, 405, 394, 383, 373,
      364, 354, 345, 337, 328, 320, 312, 305, 298, 291, 284, 278, 271, 265, 259,
      507, 496, 485, 475, 465, 456, 446, 437, 428, 420, 412, 404, 396, 388, 381,
      374, 367, 360, 354, 347, 341, 335, 329, 323, 318, 312, 307, 302, 297, 292,
      287, 282, 278, 273, 269, 265, 261, 512, 505, 497, 489, 482, 475, 468, 461,
      454, 447, 441, 435, 428, 422, 417, 411, 405, 399, 394, 389, 383, 378, 373,
      368, 364, 359, 354, 350, 345, 341, 337, 332, 328, 324, 320, 316, 312, 309,
      305, 301, 298, 294, 291, 287, 284, 281, 278, 274, 271, 268, 265, 262, 259,
      257, 507, 501, 496, 491, 485, 480, 475, 470, 465, 460, 456, 451, 446, 442,
      437, 433, 428, 424, 420, 416, 412, 408, 404, 400, 396, 392, 388, 385, 381,
      377, 374, 370, 367, 363, 360, 357, 354, 350, 347, 344, 341, 338, 335, 332,
      329, 326, 323, 320, 318, 315, 312, 310, 307, 304, 302, 299, 297, 294, 292,
      289, 287, 285, 282, 280, 278, 275, 273, 271, 269, 267, 265, 263, 261, 259,
    ];
    this.shg_table = [
      9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 17, 17, 17,
      17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 19, 19, 19, 19, 19,
      19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20,
      20, 20, 20, 20, 20, 20, 20, 20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
      21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22,
      22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
      22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
      23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
      23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
      23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
      24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
      24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
      24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
      24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
      24, 24,
    ];
  }

  stackBlurImage(canvas, url, radius, blurAlphaChannel) {
    let img = new Image();
    img.crossOrigin = "";
    img.onload = () => {
      var w = img.naturalWidth;
      var h = img.naturalHeight;
      canvas.style.width = w + "px";
      canvas.style.height = h + "px";
      canvas.width = w;
      canvas.height = h;
      var context = canvas.getContext("2d");
      context.clearRect(0, 0, w, h);
      context.drawImage(img, 0, 0);
      if (isNaN(radius) || radius < 1) return;
      if (blurAlphaChannel)
        this.stackBlurCanvasRGBA(canvas, 0, 0, w, h, radius);
      else this.stackBlurCanvasRGB(canvas, 0, 0, w, h, radius);
    };
    img.src = url;
  }

  stackBlurCanvasRGBA(canvas, top_x, top_y, width, height, radius) {
    if (isNaN(radius) || radius < 1) return;
    radius |= 0;

    var context = canvas.getContext("2d");
    var imageData;

    try {
      try {
        imageData = context.getImageData(top_x, top_y, width, height);
      } catch (e) {
        try {
          netscape.security.PrivilegeManager.enablePrivilege(
            "UniversalBrowserRead"
          );
          imageData = context.getImageData(top_x, top_y, width, height);
        } catch (e) {
          alert("Cannot access local image");
          throw new Error("unable to access local image data: " + e);
          return;
        }
      }
    } catch (e) {
      alert("Cannot access image");
      throw new Error("unable to access image data: " + e);
    }

    var pixels = imageData.data;

    var x,
      y,
      i,
      p,
      yp,
      yi,
      yw,
      r_sum,
      g_sum,
      b_sum,
      a_sum,
      r_out_sum,
      g_out_sum,
      b_out_sum,
      a_out_sum,
      r_in_sum,
      g_in_sum,
      b_in_sum,
      a_in_sum,
      pr,
      pg,
      pb,
      pa,
      rbs;

    var div = radius + radius + 1;
    var w4 = width << 2;
    var widthMinus1 = width - 1;
    var heightMinus1 = height - 1;
    var radiusPlus1 = radius + 1;
    var sumFactor = (radiusPlus1 * (radiusPlus1 + 1)) / 2;

    var stackStart = new BlurStack();
    var stack = stackStart;
    for (i = 1; i < div; i++) {
      stack = stack.next = new BlurStack();
      if (i == radiusPlus1) var stackEnd = stack;
    }
    stack.next = stackStart;
    var stackIn = null;
    var stackOut = null;

    yw = yi = 0;

    var mul_sum = this.mul_table[radius];
    var shg_sum = this.shg_table[radius];

    for (y = 0; y < height; y++) {
      r_in_sum =
        g_in_sum =
        b_in_sum =
        a_in_sum =
        r_sum =
        g_sum =
        b_sum =
        a_sum =
          0;

      r_out_sum = radiusPlus1 * (pr = pixels[yi]);
      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
      a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);

      r_sum += sumFactor * pr;
      g_sum += sumFactor * pg;
      b_sum += sumFactor * pb;
      a_sum += sumFactor * pa;

      stack = stackStart;

      for (i = 0; i < radiusPlus1; i++) {
        stack.r = pr;
        stack.g = pg;
        stack.b = pb;
        stack.a = pa;
        stack = stack.next;
      }

      for (i = 1; i < radiusPlus1; i++) {
        p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
        r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
        g_sum += (stack.g = pg = pixels[p + 1]) * rbs;
        b_sum += (stack.b = pb = pixels[p + 2]) * rbs;
        a_sum += (stack.a = pa = pixels[p + 3]) * rbs;

        r_in_sum += pr;
        g_in_sum += pg;
        b_in_sum += pb;
        a_in_sum += pa;

        stack = stack.next;
      }

      stackIn = stackStart;
      stackOut = stackEnd;
      for (x = 0; x < width; x++) {
        pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;
        if (pa != 0) {
          pa = 255 / pa;
          pixels[yi] = ((r_sum * mul_sum) >> shg_sum) * pa;
          pixels[yi + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
          pixels[yi + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
        } else {
          pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
        }

        r_sum -= r_out_sum;
        g_sum -= g_out_sum;
        b_sum -= b_out_sum;
        a_sum -= a_out_sum;

        r_out_sum -= stackIn.r;
        g_out_sum -= stackIn.g;
        b_out_sum -= stackIn.b;
        a_out_sum -= stackIn.a;

        p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

        r_in_sum += stackIn.r = pixels[p];
        g_in_sum += stackIn.g = pixels[p + 1];
        b_in_sum += stackIn.b = pixels[p + 2];
        a_in_sum += stackIn.a = pixels[p + 3];

        r_sum += r_in_sum;
        g_sum += g_in_sum;
        b_sum += b_in_sum;
        a_sum += a_in_sum;

        stackIn = stackIn.next;

        r_out_sum += pr = stackOut.r;
        g_out_sum += pg = stackOut.g;
        b_out_sum += pb = stackOut.b;
        a_out_sum += pa = stackOut.a;

        r_in_sum -= pr;
        g_in_sum -= pg;
        b_in_sum -= pb;
        a_in_sum -= pa;

        stackOut = stackOut.next;

        yi += 4;
      }
      yw += width;
    }

    for (x = 0; x < width; x++) {
      g_in_sum =
        b_in_sum =
        a_in_sum =
        r_in_sum =
        g_sum =
        b_sum =
        a_sum =
        r_sum =
          0;

      yi = x << 2;
      r_out_sum = radiusPlus1 * (pr = pixels[yi]);
      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);
      a_out_sum = radiusPlus1 * (pa = pixels[yi + 3]);

      r_sum += sumFactor * pr;
      g_sum += sumFactor * pg;
      b_sum += sumFactor * pb;
      a_sum += sumFactor * pa;

      stack = stackStart;

      for (i = 0; i < radiusPlus1; i++) {
        stack.r = pr;
        stack.g = pg;
        stack.b = pb;
        stack.a = pa;
        stack = stack.next;
      }

      yp = width;

      for (i = 1; i <= radius; i++) {
        yi = (yp + x) << 2;

        r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
        g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;
        b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;
        a_sum += (stack.a = pa = pixels[yi + 3]) * rbs;

        r_in_sum += pr;
        g_in_sum += pg;
        b_in_sum += pb;
        a_in_sum += pa;

        stack = stack.next;

        if (i < heightMinus1) {
          yp += width;
        }
      }

      yi = x;
      stackIn = stackStart;
      stackOut = stackEnd;
      for (y = 0; y < height; y++) {
        p = yi << 2;
        pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;
        if (pa > 0) {
          pa = 255 / pa;
          pixels[p] = ((r_sum * mul_sum) >> shg_sum) * pa;
          pixels[p + 1] = ((g_sum * mul_sum) >> shg_sum) * pa;
          pixels[p + 2] = ((b_sum * mul_sum) >> shg_sum) * pa;
        } else {
          pixels[p] = pixels[p + 1] = pixels[p + 2] = 0;
        }

        r_sum -= r_out_sum;
        g_sum -= g_out_sum;
        b_sum -= b_out_sum;
        a_sum -= a_out_sum;

        r_out_sum -= stackIn.r;
        g_out_sum -= stackIn.g;
        b_out_sum -= stackIn.b;
        a_out_sum -= stackIn.a;

        p =
          (x +
            ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) *
              width) <<
          2;

        r_sum += r_in_sum += stackIn.r = pixels[p];
        g_sum += g_in_sum += stackIn.g = pixels[p + 1];
        b_sum += b_in_sum += stackIn.b = pixels[p + 2];
        a_sum += a_in_sum += stackIn.a = pixels[p + 3];

        stackIn = stackIn.next;

        r_out_sum += pr = stackOut.r;
        g_out_sum += pg = stackOut.g;
        b_out_sum += pb = stackOut.b;
        a_out_sum += pa = stackOut.a;

        r_in_sum -= pr;
        g_in_sum -= pg;
        b_in_sum -= pb;
        a_in_sum -= pa;

        stackOut = stackOut.next;

        yi += width;
      }
    }

    context.putImageData(imageData, top_x, top_y);
  }

  stackBlurCanvasRGB(canvas, top_x, top_y, width, height, radius) {
    if (isNaN(radius) || radius < 1) return;
    radius |= 0;
    var context = canvas.getContext("2d");
    var imageData;

    try {
      try {
        imageData = context.getImageData(top_x, top_y, width, height);
      } catch (e) {
        // NOTE: this part is supposedly only needed if you want to work with local files
        // so it might be okay to remove the whole try/catch block and just use
        // imageData = context.getImageData( top_x, top_y, width, height );
        try {
          netscape.security.PrivilegeManager.enablePrivilege(
            "UniversalBrowserRead"
          );
          imageData = context.getImageData(top_x, top_y, width, height);
        } catch (e) {
          alert("Cannot access local image");
          throw new Error("unable to access local image data: " + e);
          return;
        }
      }
    } catch (e) {
      alert("Cannot access image");
      throw new Error("unable to access image data: " + e);
    }

    var pixels = imageData.data;

    var x,
      y,
      i,
      p,
      yp,
      yi,
      yw,
      r_sum,
      g_sum,
      b_sum,
      r_out_sum,
      g_out_sum,
      b_out_sum,
      r_in_sum,
      g_in_sum,
      b_in_sum,
      pr,
      pg,
      pb,
      rbs;

    var div = radius + radius + 1;
    var w4 = width << 2;
    var widthMinus1 = width - 1;
    var heightMinus1 = height - 1;
    var radiusPlus1 = radius + 1;
    var sumFactor = (radiusPlus1 * (radiusPlus1 + 1)) / 2;

    var stackStart = new BlurStack();
    var stack = stackStart;
    for (i = 1; i < div; i++) {
      stack = stack.next = new BlurStack();
      if (i == radiusPlus1) var stackEnd = stack;
    }
    stack.next = stackStart;
    var stackIn = null;
    var stackOut = null;

    yw = yi = 0;

    var mul_sum = this.mul_table[radius];
    var shg_sum = this.shg_table[radius];

    for (y = 0; y < height; y++) {
      r_in_sum = g_in_sum = b_in_sum = r_sum = g_sum = b_sum = 0;

      r_out_sum = radiusPlus1 * (pr = pixels[yi]);
      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);

      r_sum += sumFactor * pr;
      g_sum += sumFactor * pg;
      b_sum += sumFactor * pb;

      stack = stackStart;

      for (i = 0; i < radiusPlus1; i++) {
        stack.r = pr;
        stack.g = pg;
        stack.b = pb;
        stack = stack.next;
      }

      for (i = 1; i < radiusPlus1; i++) {
        p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
        r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
        g_sum += (stack.g = pg = pixels[p + 1]) * rbs;
        b_sum += (stack.b = pb = pixels[p + 2]) * rbs;

        r_in_sum += pr;
        g_in_sum += pg;
        b_in_sum += pb;

        stack = stack.next;
      }

      stackIn = stackStart;
      stackOut = stackEnd;
      for (x = 0; x < width; x++) {
        pixels[yi] = (r_sum * mul_sum) >> shg_sum;
        pixels[yi + 1] = (g_sum * mul_sum) >> shg_sum;
        pixels[yi + 2] = (b_sum * mul_sum) >> shg_sum;

        r_sum -= r_out_sum;
        g_sum -= g_out_sum;
        b_sum -= b_out_sum;

        r_out_sum -= stackIn.r;
        g_out_sum -= stackIn.g;
        b_out_sum -= stackIn.b;

        p = (yw + ((p = x + radius + 1) < widthMinus1 ? p : widthMinus1)) << 2;

        r_in_sum += stackIn.r = pixels[p];
        g_in_sum += stackIn.g = pixels[p + 1];
        b_in_sum += stackIn.b = pixels[p + 2];

        r_sum += r_in_sum;
        g_sum += g_in_sum;
        b_sum += b_in_sum;

        stackIn = stackIn.next;

        r_out_sum += pr = stackOut.r;
        g_out_sum += pg = stackOut.g;
        b_out_sum += pb = stackOut.b;

        r_in_sum -= pr;
        g_in_sum -= pg;
        b_in_sum -= pb;

        stackOut = stackOut.next;

        yi += 4;
      }
      yw += width;
    }

    for (x = 0; x < width; x++) {
      g_in_sum = b_in_sum = r_in_sum = g_sum = b_sum = r_sum = 0;

      yi = x << 2;
      r_out_sum = radiusPlus1 * (pr = pixels[yi]);
      g_out_sum = radiusPlus1 * (pg = pixels[yi + 1]);
      b_out_sum = radiusPlus1 * (pb = pixels[yi + 2]);

      r_sum += sumFactor * pr;
      g_sum += sumFactor * pg;
      b_sum += sumFactor * pb;

      stack = stackStart;

      for (i = 0; i < radiusPlus1; i++) {
        stack.r = pr;
        stack.g = pg;
        stack.b = pb;
        stack = stack.next;
      }

      yp = width;

      for (i = 1; i <= radius; i++) {
        yi = (yp + x) << 2;

        r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
        g_sum += (stack.g = pg = pixels[yi + 1]) * rbs;
        b_sum += (stack.b = pb = pixels[yi + 2]) * rbs;

        r_in_sum += pr;
        g_in_sum += pg;
        b_in_sum += pb;

        stack = stack.next;

        if (i < heightMinus1) {
          yp += width;
        }
      }

      yi = x;
      stackIn = stackStart;
      stackOut = stackEnd;
      for (y = 0; y < height; y++) {
        p = yi << 2;
        pixels[p] = (r_sum * mul_sum) >> shg_sum;
        pixels[p + 1] = (g_sum * mul_sum) >> shg_sum;
        pixels[p + 2] = (b_sum * mul_sum) >> shg_sum;

        r_sum -= r_out_sum;
        g_sum -= g_out_sum;
        b_sum -= b_out_sum;

        r_out_sum -= stackIn.r;
        g_out_sum -= stackIn.g;
        b_out_sum -= stackIn.b;

        p =
          (x +
            ((p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1) *
              width) <<
          2;

        r_sum += r_in_sum += stackIn.r = pixels[p];
        g_sum += g_in_sum += stackIn.g = pixels[p + 1];
        b_sum += b_in_sum += stackIn.b = pixels[p + 2];

        stackIn = stackIn.next;

        r_out_sum += pr = stackOut.r;
        g_out_sum += pg = stackOut.g;
        b_out_sum += pb = stackOut.b;

        r_in_sum -= pr;
        g_in_sum -= pg;
        b_in_sum -= pb;

        stackOut = stackOut.next;

        yi += width;
      }
    }

    context.putImageData(imageData, top_x, top_y);
  }
}
古猜..
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用canvas给图片增加滤镜
翾的博客
04-26 1916
类似操作像素的博主还写过一篇文章：原生JavaScript + Canvas实现图片局部放大器 1. 效果图 2. 实现原理 滤镜效果主要使用的均为canvas的getImageData以及putImageData。 （以上两个api详细介绍可以点击蓝色链接，跳转到MDN查看） 操纵getImageData函数返回的ImageData图片的像素信息来给图片增加滤镜效果。 2.1 负片滤镜 负片滤...
js实现图片虚化_js canvas画布实现高斯模糊效果
weixin_39891262的博客
12-19 799
最近项目中有一个需求是实现图片的局部模糊效果，看上去一个挺难的效果。在实现局部模糊效果前，首先能够实现全部模糊。经过和度娘的一番较劲后，找到了一个不错的案例，然后在他的基础上，经过一番修改，和备注，实现了当前的案例：canvas画布的高斯模糊效果var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2...
canvas实现模糊效果
01-30
css3实现图片模糊，canvas实现交互设计，简单，简单，简单，简单，简单，简单单
canvas-blur:通过canvas实现毛玻璃效果
07-07
canvas-blur 通过canvas实现毛玻璃效果 Fabio Sasso制作过一个事例使用了 html2canvas 0.4.1 (js截图库） Stackblur （图片模糊处理） 完成了一个半透明的导航栏 对比通过CSS的改进实现毛玻璃的效果 （image.css 是一个通过base64加密过得图片，可以实现毛玻璃的那种粗糙效果）
canvas图像处理——实现滤镜效果
Yvonne_Lu7的博客
07-31 2622
实现滤镜效果 点击按钮出现不同滤镜效果 首先，我们分析滤镜的具体，主要就是对图片的每个具体像素进行处理，先拿到像素，处理后再将像素放回去。 1.怎样拿到像素 通过getImageData可以拿到图片的imageData,imageData包含3个内容：width,height...
blurdesktop纯html实现类似macos动态高斯模糊效果
08-10
这个过程中涉及到了CSS3滤镜、JavaScript事件监听、图片处理、性能优化等多个关键知识点，展示了前端技术的灵活性和创新性。通过学习和实践此类项目，开发者可以提升自己在UI动态效果方面的技能。
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
巧用 CSS 把图片马赛克化
www_xuhss_com的博客
02-27 1556
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/course/detail/35475 一、image-rendering 介绍 CSS 中有一个有趣的特性叫 image-rendering，它可以通过算法来更好地显示被缩放的图片。 假设我们有一张尺寸较小的二维码截图（下方左），将其放大 10 倍后图像会被虚化（下方右）： 这时给放大的图片加上 image-re
面试总结（1）---7.28
刘群智的博客
07-28 1598
Ajax关于readyState（状态值）和status（状态码）的研究 var getXmlHttpRequest = function () {     try{         //主流浏览器提供了XMLHttpRequest对象         return new XMLHttpRequest();     }catch(e){         //低版本的IE浏览器没有...
前端面试总结三
我是谁的博客
10-26 1057
离线资源 前端兼容 CSS3 GPU加速 SPDY协议 单页面应用 GZIP压缩 CSS表达式和CSS滤镜 HTTP长连接、短连接 安全 重点： 类 安全、csrf、xss Vue原理 vuex vue-router的两种模式及区别 webpack是什么，用过什么 ...
canvas-blur-stroke:实时绘制模糊笔触的实验
05-12
画布模糊描边 实时绘制模糊笔触的实验
Canvas滤镜 灰度 浮雕 效果
04-23
纯JavaScript实现HTML5 Canvas六种特效滤镜 小试牛刀，实现了六款简单常见HTML5 Canvas特效滤镜，并且封装成一个纯 JavaScript可调用的API文件。
js canvas实现画图、滤镜效果
12-12
本文实例为大家分享了canvas实现画图、滤镜效果的具体代码，供大家参考，具体内容如下 1、用canvas来实现画图的代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style media="screen"> body {background:black; text-align:center} #v1 {background:white} </style> [removed] [removed]=function () { l
canvas 滤镜
wjy397的专栏
01-04 601
负面滤镜会从255中减去每个像素的红绿蓝分量值，再将差值设置回去。等同于翻转了该像素的颜色。    var imagedata = context.getImageData(0, 0, canvas.width, canvas.height),        data = imagedata.data;    for(i=0; i       data[i]   = 255 - da
Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js
weixin_34090643的博客
11-15 706
Canvas实现毛玻璃效果解决方式1：使用stackblur.js 在Android系统中实现图片的毛玻璃效果比较好用的类库是：Android StackBlur 官方Git地址：https://github.com/kikoso/android-stackblur 在前端Canvas中可以使用StackBlur.js:Git地址：https://github.com/flozz/StackBlu...
Canvas 10款基础滤镜（原理篇）
weixin_39415598的博客
07-14 634
theme: smartblue 本文简介 点赞 + 关注 + 收藏 = 学会了 在学习 Canvas 的路上大概率会了解到 滤镜 ，这是个很有趣的东西。 用 Canvas 开发滤镜需要对几何数学、颜色的理解等领域都有一定基础。 但先别关掉文章，没基础也没关系，不是还可以复制粘贴吗？(像极了正则表达式) 我在学习的过程中也尝试过写一些简单的滤镜，也收集过很多滤镜。但由于历史有点久远...
canvas像素级操作实现各种滤镜之高斯模糊
mydoodle
02-17 4256
相信用过PS的人很多都知道高斯模糊这个滤镜，详细的高斯模糊的原理可以猛击这个链接http://developer.51cto.com/art/201211/364930.htm。由于没有现成的canvas方面的算法实现，就得慢慢鼓捣那些基于java实现的代码。感觉这个http://blog.csdn.net/jia20003/article/details/7234741写的不错。 简单
canvas图片滤镜
风舞红枫的个人博客
03-05 274
无图不欢，先上图 <!DOCTYPE html> <html> <head> <meta name="keywords" content="风舞红枫,前端技术,canvas"/> <meta name="description" content="风舞红枫,前端技术,canvas,vue,react,node,个人博客"/> <meta charset="utf-8"> <title>图片滤镜</title&
Canvas图片模糊效果（学习笔记）
781193278专栏
02-15 2419
Canvas图片模糊效果学习视频：http://www.imooc.com/learn/601 Demo和学习笔记 index.html canvas玩儿转红包照片 <!-- 手机端适配 --> <meta name="viewport" content="height=device-height, width=device-width,
HTML5 li-canvas：一键实现单图、多图及文字绘制
li-canvas.js的核心作用是提供一个易于管理的接口，例如`new LiCanvas(canvas_id, options)`方法，允许开发者通过指定canvas元素的ID并可选地设置背景和文字样式来初始化实例。它的主要功能包括： 1. 图片绘制： -...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值