Javascript 如何在另一个html文件中使用动态创建的图像？_Javascript_Html_Src

Javascript 如何在另一个html文件中使用动态创建的图像？

javascript html

Javascript 如何在另一个html文件中使用动态创建的图像？,javascript,html,src,Javascript,Html,Src,因此，我尝试在index.html文件中通过javascript复制动态创建的图像的src，但没有成功，我想在另一个html页面中创建一个新图像，其中复制原始图像的src并显示该图像。如有任何意见或建议，将不胜感激。相关代码如下：第一页的完整脚本： window.onload = function() { var fileInput = document.getElementById('fileInput'); var fileDisplayArea = document.getEleme

因此，我尝试在index.html文件中通过javascript复制动态创建的图像的src，但没有成功，我想在另一个html页面中创建一个新图像，其中复制原始图像的src并显示该图像。如有任何意见或建议，将不胜感激。相关代码如下：

第一页的完整脚本：

window.onload = function() {

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
var filecanvas = document.getElementById('check');
var context = filecanvas.getContext('2d');


fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();

        reader.onload = function(e) {
            fileDisplayArea.innerHTML = "";


            var img = new Image();
            img.src = reader.result;
            img.id = 'newimg';
            sessionStorage.setItem("CachedImage", img.src);



            fileDisplayArea.appendChild(img);


            var canvasimage = new Image();
            canvasimage.onload = function () {
            context.drawImage(canvasimage,100,200);
            };
            canvasimage.src = reader.result;
        }

        reader.readAsDataURL(file);
        window.open('../markup/image.html');
    } else {
        fileDisplayArea.innerHTML = "File not supported!"
    }

});

var img = new Image(); 
img.src = reader.result;
img.id = 'newimg';
sessionStorage.setItem("CachedImage", img.src); // save image source into sessions

}

第二页上的完整脚本+html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

       window.onload = function() {
           var newimage = document.getElementById('ni');
           newimage.src = sessionStorage.getItem("CachedImage");
           newimage.alt = 'Cannot be displayed';
       };

</script>
<img id='ni' src="" />
</body>
</html>

 var newimage = new Image();
 newimage.id = 'ni';
 newimage.src = sessionStorage.getItem("CachedImage"); // retrieve image src from sessions


window.onload=函数（）{
var newimage=document.getElementById（'ni'）；
newimage.src=sessionStorage.getItem（“CachedImage”）；
newimage.alt='无法显示'；
};

您可以在客户端和服务器端执行此操作。在客户端，您可以使用会话存储或本地存储选项。如果要从服务器端检索数据，则需要创建一个函数来返回值。稍后，您可以从中访问数据

因为您只传递文件的路径，所以我建议您使用客户端存储，比如会话

源代码：
第一页中的javascript代码：

window.onload = function() {

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
var filecanvas = document.getElementById('check');
var context = filecanvas.getContext('2d');


fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();

        reader.onload = function(e) {
            fileDisplayArea.innerHTML = "";


            var img = new Image();
            img.src = reader.result;
            img.id = 'newimg';
            sessionStorage.setItem("CachedImage", img.src);



            fileDisplayArea.appendChild(img);


            var canvasimage = new Image();
            canvasimage.onload = function () {
            context.drawImage(canvasimage,100,200);
            };
            canvasimage.src = reader.result;
        }

        reader.readAsDataURL(file);
        window.open('../markup/image.html');
    } else {
        fileDisplayArea.innerHTML = "File not supported!"
    }

});

var img = new Image(); 
img.src = reader.result;
img.id = 'newimg';
sessionStorage.setItem("CachedImage", img.src); // save image source into sessions

第二页中的javascript代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

       window.onload = function() {
           var newimage = document.getElementById('ni');
           newimage.src = sessionStorage.getItem("CachedImage");
           newimage.alt = 'Cannot be displayed';
       };

</script>
<img id='ni' src="" />
</body>
</html>

 var newimage = new Image();
 newimage.id = 'ni';
 newimage.src = sessionStorage.getItem("CachedImage"); // retrieve image src from sessions

使用缓存发送http头的正确方法。但我写了一个在localStorage 2,2kb中缓存图像的插件。用法：


$（'img'）.imageCaching（）；

不同的页面不共享DOM！您需要以某种方式共享图像src。通过LocalStorage/cookie/URL/database等document.getElementById（'newimg'）；不会在第二页返回任何内容，因为您的新img位于第一页。您需要将图像（或其源url）存储在第一页的某个位置，然后在第二页上检索它。你可以使用cookie、数据库或其他东西，但你必须将其存储在某个位置，将图像保存到本地服务器，然后通过相对URL地址引用它。我已编辑了我的帖子，以显示用于获取用户图像的脚本。我不认为第1页中的“reader.result”将返回正确路径。你可以添加警报以查找该值。例如：警报（reader.result）；您还应该检查此链接：获取文件路径后，在将其保存到会话之前，请注意在其中转义黑色斜杠。例如：要将“\”保存为字符串，您需要输入“\ \”。谢谢您的帮助/建议，我将继续尝试使其正常工作。