Javascript - 在控制台中显示徽标重新大小错误

Question

我正在使用wordpress构建一个网站，并使用javascript为商业徽标创建一个粒子滑块图像。我正在粒子滑块版本和徽标的静态图像之间切换，切换点为960px。我认为here和here的重新调整有重大问题。我现在已经得到了这些答案的帮助，但是，它仍然有点笨重，特别是在Safari，当我重新调整大小时，我在控制台上收到以下错误 -

它也偶尔会在chrome中抛出这个错误 -

这是我页面中的javascript代码 -

粒子slider.php

<script type="text/javascript">
        var ps = null

        function init(){
          var isVisible = window.innerWidth >= 960;
          if (!ps && isVisible) {
            // create and init
            ps = new ParticleSlider({
             // ptlGap: 1,
             // ptlSize: 1,
              width: 1400,
              height: 600,
            });

            ps.init(false);
          } else if (ps && !isVisible) {
            // stop and remove
            ps.requestAnimationFrame = function() {}; // Stop render loop
            ps = null;
          }
        }

        window.addEventListener('load', init, false)
        window.onload = init;
        window.addEventListener('resize', init, false);
        window.onresize = init;
    </script>

任何人都可以发现可能引发此错误的内容吗？是在这个脚本中还是在粒子滑块javascript文件中？

是否可以应用try / catch代码块来防止这些错误？如果是这样的话，我该如何处理呢？ （我不是那么精通javascript，所以会很感激任何帮助）。

Answer 1

以下是工作示例：https://jsfiddle.net/eqomoq9j/1/

 // create and init
 ps = new ParticleSlider({
   sliderId: "sliderXYZ", // this was missing, but i don't know exact API...
   width: 1400,
   height: 600
 });

最重要的 - 具有正确图像src URL的HTML，这是CORS规则允许的

<div id="sliderXYZ">
  <div class="slides">
    <div class="slide" data-src="data:image/png;base64,iVBORw0KGgoAAAAN......"></div>
  </div>
  <canvas class="draw"></canvas>
</div>

请注意，这就是为什么你得到"Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0."例外

最有可能写在下面 - "'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

因此，您需要将图像放在与主HTML相同的域中，或者具有相应的CORS标头

有关CORS的更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Answer 2

问题不在于你向我们展示的文件，它说问题出现在名为ps.js的文件中我想也许是因为你给它的高度和宽度都大于它自己的图像