Javascript - 控制台中显示 Logo 调整大小错误

Question

我正在 WordPress 上构建一个网站，并使用 JavaScript 为企业 Logo 创建粒子 slider 图像。我正在粒子 slider 版本和 Logo 的静态图像之间切换，切换点为 960 像素。我在调整大小时遇到​​了重大问题，如记录的 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>

任何人都可以发现可能引发此错误的原因吗？是在这个脚本中还是在粒子 slider 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
 });

最重要 - 具有正确图像源 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>

请注意，您收到“无法在'CanvasRenderingContext2D'上执行'getImageData':源宽度为0。”异常的原因

很可能写在下面 - “'CanvasRenderingContext2D'上的'getImageData': Canvas 已被跨源数据污染。”

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

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