Javascript - logo re-size error showing in console

Question

I'm building a site on wordpress and using javascript to create a particle-slider image for the business logo. I'm switching between the particle-slider version and a static image for the logo with a switch point at 960px. I'va had major issues with the re-sizing as documented here and here . I've now got it to work with help from those answers, however, its still a bit clunky especially on Safari where I'm getting the following error on the console when the page re-sizes -

It also ocassionally throws up this error in chrome -

This is the javascript code in my page -

particle-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>

Can anyone spot what might be throwing up this error? Is it in this script or in the particle-slider javascript file?

Is it possible to apply a try/catch code block to prevent these errors? If that's the case how would I go about this? (I'm not that well versed with javascript so would appreciate any assistance).

@jit Annoyingly the ps effect won't work when i try and recreate it in jsfiddle, might be something to do with the ps.js file. If you're looking for the relevant code, there are links in my query to it all. Is here something inparticular you're looking for? — Mike.Whitehead, Dec 19 '17 at 14:12

score 0 · Answer 1 · answered Dec 20 '17 at 16:23

Here are working example: 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
 });

Most important - HTML with correct image src URL which is allowed by CORS rules

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

Please note, that the reason why you are getting "Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0." exception

most likely was written below - "'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

So you need to place your images at the same domain as your main HTML or have corresponding CORS headers

More information about CORS is here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

score 0 · Answer 2 · answered Dec 24 '17 at 14:42

0

The problem is not on the file you showed us, It said the problem is in file named ps.js I guess maybe cause you are giving it height and width larger than the image it self

answered Dec 24 '17 at 14:42

younes rami

71
3

Javascript - logo re-size error showing in console

2 Answers2