//读取图片 search.html
<body>
<br>
<div style="border:5px solid #000000"></div>
<br><br>
<div id="a">
<span>
<h2>图 像 检 索 工 具</h2>
</span>
</div>
<div style="display: block;" >
<img id="preview" width="-1" height="-1" style="max-width: 256px; display: block; max-height: 256px; margin: 0 auto;">
</div>
<form id="form" enctype="multipart/form-data"
onsubmit="return check()";>
<input type="file" accept="image/*" name="file" id="file"/>
</form>
<div style="text-align: center;" >
<button id="b" onclick="location.href='result.html'">开始检索</button>
</div>
<script>
var fileDom = document.getElementById("file");
var previewDom = document.getElementById("preview");
fileDom.addEventListener("change", e=>{
var file = fileDom.files[0];
// check if input contains a valid image file
if (!file || file.type.indexOf("image/") < 0) {
fileDom.value = "";
previewDom.src = "";
return;
}
// use FileReader to load image and show preview of the image
var fileReader = new FileReader();
fileReader.onload = e=>{
previewDom.src = e.target.result;
};
fileReader.readAsDataURL(file);
});
var formDom = document.getElementById("form");
function check() {
var file = fileDom.files[0];
// check if input contains a valid image file
if (!file || file.type.indexOf("image/") < 0) {
return false;
}
}
</script>
</body>
//引用图片 result.html
<body>
<p>所 选 图 片</p>
</body>
请问如何在第二个html文件中引用第一个html中读取的图片
把图片在第一个页面中存储在浏览器中,然后第二页面去获取。
把image转成base64保存在localStrong中,页面二中取出base64然后渲染即可
步骤
1、右键单击第一个网页的内容,F12点击'网络',最后看一下显示出来的这张图片的url地址,
2、如果有具体的URL的话,那么就把这个URL复制进去即可,如果没有的话,那么说明没办法从这个html获取这张图片。
如有问题及时沟通
直接在当前的html引用图片的url不就可以了
首先使用iframe引入另一个页面,然后再通过id选择器获取其元素,可参考如下链接
使用IFRAME父页面调用子页面和子页面调用父页面的元素与方法https://www.cnblogs.com/web-panpan/p/7215877.html
如果你两个页面之间是通过路径跳转过去的,那就可以跳转路径中携带你需要的url,再在后面那个页面渲染即可;如果两个页面之间没有跳转关系,那就可以放在缓存中,直接使用即可。
如果涉及跳转页面的话
1.存缓存
2.放URL上面
如果不涉及跳转用嵌套的话
用get请求方式把html 当成数据直接 innerHtml 插入到插槽里去