jQuery : 이미지의 너비와 높이를 가져올 수 없습니다.

Question

각 이미지에 대해 캔버스를 만드는 슬라이더 스크립트를 사용하려고합니다.

내 HTML은 다음과 같다 : 이미지 내 데이터베이스에서 슬라이더에로드되는

<div id="slideshow"> 

      <ul class="slides"> 
       <li><a href="#"><img src="image1"></a></li> 
       <li><a href="#"><img src="image2"></a></li>    
       <li><a href="#"><img src="image3"></a></li> 
      </ul> 

      <span class="arrow previous"></span> 
      <span class="arrow next"></span> 
</div> 

.

내 자바 스크립트은 다음과 같습니다)

$(window).load(function(){ 

// We are listening to the window.load event, so we can be sure 
// that the images in the slideshow are loaded properly. 


// Testing wether the current browser supports the canvas element: 
var supportCanvas = 'getContext' in document.createElement('canvas'); 

// The canvas manipulations of the images are CPU intensive, 
// this is why we are using setTimeout to make them asynchronous 
// and improve the responsiveness of the page. 

var slides = $('#slideshow li'), 
    current = 0, 
    slideshow = {width:0,height:0}; 

setTimeout(function(){ 

    window.console && window.console.time && console.time('Generated In'); 

    if(supportCanvas){ 
     $('#slideshow img').each(function(){ 

      if(!slideshow.width){ 
       // Taking the dimensions of the first image: 
       slideshow.width = this.width; 
       slideshow.height = this.height; 
      } 

      // Rendering the modified versions of the images: 
      createCanvasOverlay(this); 
     }); 
    } 

    window.console && window.console.timeEnd && console.timeEnd('Generated In'); 

    $('#slideshow .arrow').click(function(){ 
     var li   = slides.eq(current), 
      canvas  = li.find('canvas'), 
      nextIndex = 0; 

     // Depending on whether this is the next or previous 
     // arrow, calculate the index of the next slide accordingly. 

     if($(this).hasClass('next')){ 
      nextIndex = current >= slides.length-1 ? 0 : current+1; 
     } 
     else { 
      nextIndex = current <= 0 ? slides.length-1 : current-1; 
     } 

     var next = slides.eq(nextIndex); 

     if(supportCanvas){ 

      // This browser supports canvas, fade it into view: 

      canvas.fadeIn(function(){ 


       // Fade the current slide out of view: 
       li.fadeOut(function(){ 
       // Show the next slide below the current one: 
       next.fadeIn(); 
        li.removeClass('slideActive'); 
        canvas.hide(); 
        next.addClass('slideActive'); 
       current = nextIndex; 
       }); 
      }); 
     } 
     else { 

      // This browser does not support canvas. 
      // Use the plain version of the slideshow. 

      current=nextIndex; 
      next.addClass('slideActive').show(); 
      li.removeClass('slideActive').hide(); 
     } 
    }); 

},100); 

// This function takes an image and renders 
// a version of it similar to the Overlay blending 
// mode in Photoshop. 

function createCanvasOverlay(image){ 

    var canvas   = document.createElement('canvas'), 
     canvasContext = canvas.getContext("2d"); 

    // Make it the same size as the image 
    canvas.width = slideshow.width(); 
    canvas.height = slideshow.height(); 

    // Drawing the default version of the image on the canvas: 
    canvasContext.drawImage(image,0,0); 


    // Taking the image data and storing it in the imageData array: 
    var imageData = canvasContext.getImageData(0,0,canvas.width,canvas.height), 
     data  = imageData.data; 

    // Loop through all the pixels in the imageData array, and modify 
    // the red, green, and blue color values. 

    for(var i = 0,z=data.length;i<z;i++){ 

     // The values for red, green and blue are consecutive elements 
     // in the imageData array. We modify the three of them at once: 

     data[i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 
     data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 
     data[++i] = ((data[i] < 128) ? (2*data[i]*data[i]/255) : (255 - 2 * (255 - data[i]) * (255 - data[i])/255)); 

     // After the RGB elements is the alpha value, but we leave it the same. 
     ++i; 
    } 

    // Putting the modified imageData back to the canvas. 
    canvasContext.putImageData(imageData,0,0); 

    // Inserting the canvas in the DOM, before the image: 
    image.parentNode.insertBefore(canvas,image); 
} 

};

canvas.width = slideshow.width(); UNCAUGHT TYPEERROR: NUMBER IS NOT A FUNCTION

사람이 이유를 볼 수 있습니다

나는 내 브라우저에서 슬라이더를 표시 할 다음과 같은 오류 메시지가? 문제가 어디에 있습니까?

Answer 1

다음을 시도하십시오. canvas.width = slideshow.width