javascript - JS应用于每个 Canvas (多个)

Question

我想使用StackBlur.js在同一页面上的多个 Canvas 元素上；但是使用 Zurb 提供的示例，我只能将它应用到第一个canvas元素；它忽略其他人。

知道如何使此代码更通用以应用于每个 Canvas 元素，而不仅仅是一个吗？

JS(Zurb 提供)是这样的:

  $(function() {
  // Change this value to adjust the amount of blur
  var BLUR_RADIUS = 100;

  var canvas = document.querySelector('[data-canvas]');
  var canvasContext = canvas.getContext('2d');

  var image = new Image();
  image.src = document.querySelector('[data-canvas-image]').src;

  var drawBlur = function() {
    var w = canvas.width;
    var h = canvas.height;
    canvasContext.drawImage(image, 0, 0, w, h);
    stackBlurCanvasRGBA('heroCanvas', 0, 0, w, h, BLUR_RADIUS);
  };

  image.onload = function() {
    drawBlur();
  }
});

相关的 HTML 是这样的:

<canvas class="hero__background" id="heroCanvas" width="200" height="200" data-canvas></canvas>

<!-- Our image to be blurred -->
<img data-canvas-image style="display: none" src="path/to/image.jpg" />

谢谢!

Answer 1

将他们的代码封装在具有该属性的所有元素(在本例中为 data-canvas)的循环中，如下所示

$('[data-canvas]').each(function(){
  var $el = $(this);
  // insert their code here and change it to reference the correct image each time
});

所以最后您可以单独引用页面上的每个 Canvas ，如下所示:

$(function(){

  // our iteration
  $('[data-canvas]').each(function(){
    var $el = $(this);

    var BLUR_RADIUS = 100;
    var canvas = this; // canvas is the element we're iterating over
    var canvasContext = canvas.getContext('2d');

    var image = new Image();

    // I changed the line below of theirs to refer to the canvases attributes
    // we're iterating over above
    image.src = $el.attr('data-src'); 

    var drawBlur = function() {
      var w = canvas.width;
      var h = canvas.height;
      canvasContext.drawImage(image, 0, 0, w, h);

      var id = $el.attr('id'); // use the id from the canvas
      stackBlurCanvasRGBA( id, 0, 0, w, h, BLUR_RADIUS); 
    };

    image.onload = function() {
      drawBlur();
    }

  });
});

所以现在我们不需要图像，只需要它们的 src 属性，这些属性现在作为data-src` 存在于 Canvas 上。 html 可以如下所示:

<canvas class="hero__background" id="heroCanvas1" data-src="/image/location.jpg" width="200" height="200" data-canvas></canvas>
<canvas class="hero__background" id="heroCanvas2" data-src="/image/location2.jpg" width="200" height="200" data-canvas></canvas>

更新:我意识到您正在 Canvas 中显示信息，因此需要多个信息。上面更新了代码。

更新 2:我意识到堆栈模糊依赖于每个调用的 ID，因此您需要依次从每个 Canvas 获取该 ID，更新了上面的代码

旁白:我建议按类而不是属性迭代 Canvas ，但我使用它是因为这就是您的 html 中的内容。我建议为每个类添加一个类并将迭代更改为如下所示:

$('.blurImgCanvas').each(function(){....})