Question

我正在处理一些jquery的东西，并遇到了这个错误，我无法弄清楚如何解决它。我正在使用flickr api来查看当天的前16张照片，而我正在使用javascript画布这样做，但它一直给我这个错误。这是我的代码。

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();
    }
})

和

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

由于画布发生了错误，当我调用drawImage时，它会抛出这个，所以我想知道会导致什么。提前谢谢。

错误是：

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

Answer 1

drawImage方法wants an Image object，而不是字符串。因此，您只需将URL实例化为Image对象：

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

一旦您知道drawImage想要什么，错误消息的“类型错误”部分就足够清晰了。其余的错误信息有点混乱，因为异常来自jQuery的AJAX成功回调调用的函数，这意味着你最终会在你和你的bug之间存在几层模糊。

JQuery TypeError：类型错误

1 个答案: