Javascript - 控制台中显示徽标大小调整错误答案

【问题标题】：Javascript - logo re-size error showing in consoleJavascript - 控制台中显示徽标大小调整错误
【发布时间】：2018-05-28 08:56:19
【问题描述】：

我正在 wordpress 上建立一个网站，并使用 javascript 为企业徽标创建粒子滑块图像。我正在粒子滑块版本和徽标的静态图像之间切换，切换点为 960 像素。我在 here 和 here 记录的重新调整大小方面遇到了重大问题。我现在可以在这些答案的帮助下使用它，但是，它仍然有点笨拙，尤其是在 Safari 上，当页面重新调整大小时，我在控制台上收到以下错误 -

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

这是我页面中的 javascript 代码 -

粒子滑块.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，所以会很感激任何帮助）。

【问题讨论】：

@mike-whitehead 你能提供那个jsfiddle吗？
@jit 令人烦恼的是，当我尝试在 jsfiddle 中重新创建它时，ps 效果不起作用，可能与 ps.js 文件有关。如果您正在寻找相关代码，我的查询中有所有链接。这里有您特别需要的东西吗？

标签： javascript wordpress

【解决方案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
 });

最重要的 - HTML 具有正确的图像 src URL，这是 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

【讨论】：

【解决方案2】：

问题不在你给我们看的文件上，它说问题出在名为的文件中 ps.js 我想可能是因为你给它的高度和宽度大于它自己的图像

【讨论】：