Вы не можете открыть его напрямую, используя «data: ....» в качестве URL, но вы можете сохранить это изображение в локальном хранилище и использовать его на другой странице
<!-- FIRST PAGE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
window.open("second_page.html", "_blank");
localStorage.setItem("image",e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function() {
readURL(this);
});
</script>
</body>
</html>
<!--SECOND PAGE -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<img id="img2" src="#" alt="your image" />
</body>
</html>
<script>
$(document).ready(function() {
$("#img2").attr('src', localStorage.getItem("image"));
});
</script>