Question

所以我尝试在我的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!"
    }

});

}

第二页上的完整脚本+ 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>

Answer 1

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

由于您只传递文件的路径，我建议您使用客户端存储，例如会话。

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

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

第二页的javascript代码：

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

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

1 个答案: