JQuery TypeError: Type Error
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.
加载中,请稍侯......
精彩评论