如何在javascript中克隆图像

Posted 2023-03-06

技术标签:

【中文标题】如何在javascript中克隆图像【英文标题】：How can i clone an image in javascript 【发布时间】：2011-08-07 09:20:36 【问题描述】：

我正在尝试在 javascript 中克隆图像，但不加载新图像。通常，新浏览器会加载一次图像，并且有多种方法可以再次使用该图像。问题是当我在 IE 6 中测试它时，图像会从服务器请求一个新图像。任何人都有一些关于如何在旧浏览器中执行此操作的信息？ 3 种无效的方法：

<html>
<head>
    <title>My Image Cloning</title>
    <script type="text/javascript">
        sourceImage = new Image();
        sourceImage.src = "myImage.png";

        function cloneImageA () 
            imageA = new Image();
            imageA.src = sourceImage.src;
            document.getElementById("content").appendChild(imageA);
        

        function cloneImageB () 
            imageB =  sourceImage.cloneNode(true);
            document.getElementById("content").appendChild(imageB);
        

        function cloneImageC()
        
            var HTML = '<img src="' + sourceImage.src + '"  />';
            document.getElementById("content").innerHTML += HTML;
        
    </script>
</head>
<body>
    <div id="controle">
        <button onclick="cloneImageA();">Clone method A</button>
        <button onclick="cloneImageB();">Clone method B</button>
        <button onclick="cloneImageC();">Clone method C</button>
    </div>
    <div id="content">
        Images:<br>
    </div>
</body>

解决方案

在图像目录中添加了带有简单 .htaccess 文件的服务器端缓存头： /img/.htaccess

Header unset Pragma
Header set Cache-Control "public, max-age=3600, must-revalidate"

如果设置了缓存头，上述所有 javascript 方法都将使用加载的图像。

【问题讨论】：

您到底为什么要在 IE 6 中进行测试？ @Iwburk ：胡乱猜测，别开枪：这是先决条件。 @lwburk 因为它有助于降低服务器请求。无论如何，人们仍在使用旧版浏览器。您可以尝试通过在开始页面上显示一些框建议他们升级来劝阻人们使用 IE6。类似于：“此站点在您的浏览器中可能无法正常运行。请升级到...等。” @Kooilnc : 好点，没有其他解决方案时我会这样做 【参考方案1】：

javascript 对此内置有规定。这是从 Danny Goodman 的 Javascript Bible 2nd Ed p.498,500 修改的代码，用于缓存/预加载图像，

<img src='/images/someotherimage1.png' id='img1'>
<img src='/images/someotherimage2.png' id='img2'>
<img src='/images/someotherimage3.png' id='img3'>
<script type="text/javascript">
function assignall(numImages, x, y) 
    var img = new Image(x, y);
    img.src = '/images/someimage.png';
    var x;
    for (x=1; x <= numImages; x++) 
        document.getElementById('img'+x).src = img.src;
    


assignall(3); //do it.
</script>

如果您要处理大量图像，则始终可以使用数组。

var img = new Array();
function initallimages(numImages, x, y) 
    var x;
    for (x=1; x <= numImages; x++) 
        img['img' + x] = new Image(x,y);
        img['img' + x].src = '/images/someimage.png';
    
 
 function assignallimages(numImages) 
    var x;
    for (x=1; x <= numImages; x++) 
        document.getElementById('img' + x).src = img['img'+x]['img' + x].src;
    


initallimages(3, 320, 240);
assignallimages(3);

【讨论】：

在服务器端找到了解决方案，我仍然会对此进行测试。感谢您的回复！它确实克隆了一个图像，当与事件一起使用时它们会再次加载图像。测试了几次，我无法加载缓存的图像并在每次鼠标单击时重复使用它（例如）。对此有什么建议吗？无论如何，感谢您的宝贵时间【参考方案2】：

Afaik 默认浏览器行为是缓存图像。所以这样的事情应该按照你想要的方式工作：

 var sourceImage = document.createElement('img'),
     imgContainer = document.getElementById("content");
 sourceImage.src = "[some img url]";
 imgContainer.appendChild(sourceImage);

 function cloneImg()
     imgContainer.appendChild(sourceImage.cloneNode(true));

这一切都很好，所以它也应该在 IE6 中运行（我没有它，所以无法测试）。 See it in action

此外，您可能需要检查 IE6 浏览器的缓存设置。我记得在 IE

【讨论】：

与cloneImageA()函数的方法相同。缓存设置是自动的，我会尝试做一些与之相关的服务器端更改。你的意思是cloneImageB 我猜？是的，监督。如果你控制了服务器，缓存头可能确实也有关系。是的，cloneImageB()。我添加了一个简单的 .htaccess 文件，其中包含以下命令：Header unset Pragma 和 Header set Cache-Control "public, max-age=3600, must-revalidate" 这就是解决方案，在 IE6 中也能像魅力一样工作。

以上是关于如何在javascript中克隆图像的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Javascript 中克隆 XML 文档？

在 JavaScript 中如何克隆对象？

克隆 JavaScript 对象时如何排除键列表？ [复制]

在 JavaScript 中克隆对象

在 JavaScript 中如何访问 session？

如何在不使用 JSON.stringify 或 JSON.parse 的情况下在 javascript 中克隆数组？ [复制]