JQuery TypeError: Type Error_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-27 10:25 出处：网络

I am working on some jquery stuff and ran into this error and I can\'t figure out how to fix it. I am using the flickr api to view the top 16 photos of the day, and I am doing so using the javascript

I am working on some jquery stuff and ran into this error and I can't figure out how to fix it. I am using the flickr api to view the top 16 photos of the day, and I am doing so using the javascript canvas, but it keeps giving me that error. Here is my code.

var URLs = new Array();
function draw() {
    // Loop through all images
    var ctx = $('#canvas')[0].getContext("2d");
    for (i=0;i<16;i++){
        //document.write(URLs[i]);
        //alert("hi");
        ctx.drawImage(URLs[i],i * 120,i*120,100,100);
    }
}
$.ajax({
    url: 'http://api.flickr.com/services/rest/?&method=flickr.interestingness.getList&api_key=40ebfc18056e62c7e1cbec778b1db727&format=json&jsoncallback=?',
    dataType: "jsonp",
    success:function(data){
        for(var i = 0; i < 16; i++)
        {
            var photoURL = 'http://farm' + data.photos.photo[i].farm + '.static.flickr.com/' + data.photos.photo[i].server + '/' + data.photos.photo[i].id + '_' + data.photos.photo[i].secret + '_m.jpg';
            URLs[i] = photoURL;
        }
        draw();
    }
})

and

<html>
  <head>
    <title>Flickr Art gallery</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/flickr.js"></script>
    <style type="text/css">
      img { display:none; }
      table { margin: 0 auto; }
      td { padding:15px; }
    <开发者_运维知识库;/style>
  </head>
  <body>
    <canvas id="canvas" width="1000" height="600"></canvas>
  </body>
 </html>

The error is happening because of the canvas, when I call drawImage, it throws this, so I was wondering what would cause that. Thanks in advance.

The error was :

Uncaught TypeError: Type error 
d.d.extend._Deferred.f.resolveWith jquery.js:16 
v jquery.js:16 
d.ajaxTransport.send.d.onload.d.onreadystatechange jquery.js:16

The drawImage method wants an Image object, not a string. So, you just need to instantiate your URLs as Image objects:

for(i = 0; i < 16; i++) {
    var image = Image.new();
    image.src = URLS[i];
    ctx.drawImage(image, i * 120, i * 120, 100, 100);
}

The "Type Error" part of your error message is clear enough once you know what drawImage wants. The rest of the error message is a bit of a mess because the exception originates inside a function that is being called by jQuery's AJAX success callback, this means that you end up with several layers of obscurity between you and and your bug.