Javascript 无法在浏览器中显示图像。该图像在画布标记中动态添加。但可以在inspect元素中查看

我能够从.JSON文件中动态选择图像路径，但图像无法显示。请参阅以下连结： 当我在控制台中检查时，我能够在画布标记中看到图像，但它不会显示在浏览器中。请参考此链接 我还附加了相同的代码和注释，从中我动态创建带有源代码的图像标记，然后将其附加到画布标记

函数加载文件（）{
var输入，文件，fr；
var c2=document.getElementById（“我们的画布”）；
var c2_context=c2.getContext（“2d”）；
输入=document.getElementById（'fileinput'）；
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=接收到的文本；
fr.readAsText（文件）；
函数receivedText（注释）{
var表_网格=“”；
让line=annotations.target.result；
var obj=$.parseJSON（annotations.target.result）；
var imgpath=obj[0]。ImageFilePath；
var PAR =文档.GETelEnMyBID（“IMAGE DIVE”）；
//动态生成img标签
var img=document.createElement（'img'）；
//从json文件设置img路径
img.src=imgpath；
//将动态创建的图形img添加到画布
c2.儿童（img）；
$。每个（对象、功能（键、值）{
表_网格+=''；
表_grid+=''+值。CenterPointX+''；
表_grid+=''+值。原始转换程序+''；
表_网格+=''+值.宽度+''；
表_网格+=''+值。高度+''；
表_网格+=''；
$（'数据网格'）.append（表格网格）；
//在img文件上为每个尺寸标注绘制矩形
c2_context.strokeRect（value.CenterPointX，value.OriginYConverter，value.Width，value.Height）；
});
}
}

动态开关实用程序
可视化验证实用程序-版本1.0





上传JSON文件







中心点X
原点Y转换器
宽度
高度

**要在画布上查看图像，这是一个完美的选择

var canvas=document.getElementById（'our-canvas'），//canvas元素是HTML的一部分，允许动态、可编写脚本地呈现形状和图像。
context=canvas.getContext（'2d'）；
uploadedFile=document.getElementById（'uploaded-file'）；
addEventListener（'DOMContentLoaded'，initImageLoader）；
函数initImageLoader（）{//此函数用于在网页上加载图像
//uploadedFile.addEventListener（'change'，HandleManualUploadedFile）；//选择要在网页上查看的选定文件
功能手柄手册辅助文件（ev）{
var file=ev.target.files[0]；
handleFile（文件）；
}   
}
函数handleFile（file）{//此函数用于上载图像格式文件，如PNG和JPEG文件
var ImageType=/image.*/；
if（file.type.match（ImageType））{
var reader=new FileReader（）；//读取此选定图像文件
reader.onloadend=函数（事件）{
var tempmagestore=new Image（）；//将图像存储在网页上
tempImageStore.onload=函数（ev）{
canvas.height=ev.target.height；
canvas.width=ev.target.width；
context.strokeStyle=“#FF0000”；
背景图像（ev.target，0,0）；
}   
tempImageStore.src=event.target.result；
}
reader.readAsDataURL（文件）；
}   
}

动态开关实用程序
可视化验证实用程序-版本1.0





上传JSON文件







中心点X
原点Y转换器
宽度
高度


函数loadFile（）{
var输入，文件，fr；
var c2=document.getElementById（“我们的画布”）；
var c2_context=c2.getContext（“2d”）；
输入=document.getElementById（'fileinput'）；
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=接收到的文本；
fr.readAsText（文件）；
函数receivedText（注释）{
var表_网格=“”；
让line=annotations.target.result；
var obj=$.parseJSON（annotations.target.result）；
var imgpath=obj.ImageFilePath；
var PAR =文档.GETelEnMyBID（“IMAGE DIVE”）；
//动态生成img标签
var img=document.createElement（'img'）；
//从json文件设置img路径
img.src=imgpath；
img.onload=函数（）{
c2.getContext（'2d'）.drawImage（img，0,0）；
$.each（对象标签数据、函数（键、值）{
表_网格+=''；
表_grid+=''+值。CenterPointX+''；
表_grid+=''+值。原始转换程序+''；
表_网格+=''+值.宽度+''；
表_网格+=''+值。高度+''；
表_网格+=''；
$（'数据网格'）.append（表格网格）；
//在img文件上为每个尺寸标注绘制矩形
context.strokeStyle=“#FF0000”；
c2_context.strokeRect（value.CenterPointX，value.OriginYConverter，value.Width，value.Height）；
});
}
}
}

尝试使用

文件作为图像URL的前缀：//

，因为您是通过文件系统加载图像URL的，而不是通过

localhost

或类似的方式加载图像URL。但是如果我想从文件系统中选取文件，该怎么办。实际上，这就是要求。选择文件后，如果路径中没有

文件：//

，请在将其发送到画布之前添加它。通常，如果您运行的是服务器，您会将文件上载到某个位置，然后引用该位置。我在将其发送到画布之前添加了该位置。它不起作用