Javascript加载随机图像
我想创建一个javascript函数,在调用函数da_image时加载一个随机图像。我希望图像加载到我设置的画布上。我的代码中有明显的错误吗?当前没有显示任何内容Javascript加载随机图像,javascript,image,file-upload,Javascript,Image,File Upload,我想创建一个javascript函数,在调用函数da_image时加载一个随机图像。我希望图像加载到我设置的画布上。我的代码中有明显的错误吗?当前没有显示任何内容 var images = [ "http://circlesfordialogue.com/wp-content/uploads/2014/12/LAURA-LET%C2%B4S-CIRCLE-UP-2014-12-08.jpg", "http://mat
var images = [
"http://circlesfordialogue.com/wp-content/uploads/2014/12/LAURA-LET%C2%B4S-CIRCLE-UP-2014-12-08.jpg",
"http://mathworld.wolfram.com/images/eps-gif/ConcentricCircles_1000.gif",
"http://www.charlespetzold.com/blog/2012/12/BezierCircleFigure3.png"
];
function da_image(){
var file = images[0];
var reader = new FileReader();
reader.onload = function(){
var img = new Image();
img.src = reader.result;
img.onerror = function(){
reset_canvas();
o.font = '30px sans-serif'
o.fillText('Error: Invalid Image ' + file.name, 50, 100);
}
img.onload = function(){
document.getElementById("text").innerHTML = 'Recognizing Text... This may take a while...'
reset_canvas();
var rat = Math.min(c.width / img.width, c.height / img.height);
o.drawImage(img, 0, 0, img.width * rat, img.height * rat)
var tmp = document.createElement('canvas')
tmp.width = img.width;
tmp.height = img.height;
var ctx = tmp.getContext('2d')
ctx.drawImage(img, 0, 0)
var image_data = ctx.getImageData(0, 0, tmp.width, tmp.height);
runOCR(image_data, true)
}
}
加载映像时会触发onload处理程序。如果在设置onload处理程序时已加载映像,则不会触发该映像
因此,在设置
.onload
函数之后,请始终设置.src
属性。那么文件读取器的作用是什么,您从不读取文件,因此不会触发onload
回调。哦,等等,您实际上是在onload处理程序中读取跨域url作为文件。这是行不通的,首先是同源策略,其次根本不需要读取映像,在onload处理程序中读取也行不通,只需在画布中绘制它,但由于同源策略,您将无法修改映像。然后是未定义的变量c
,这段代码是复制/粘贴的吗?对不起,我应该从一开始就输入这段代码:var c=document.getElementById('c'),o=c.getContext('2d');