从 <img> 标签中读取图像并将图像粘贴到另一个 img 标签中答案

【问题标题】：Reading an image from <img> tag and pasting the image in another img tag从 <img> 标签中读取图像并将图像粘贴到另一个 img 标签中
【发布时间】：2016-08-26 12:47:14
【问题描述】：

我有一张来自 PHP 数据库的图片，是这种格式的

<img src="data:image/jpeg;base64,{{base64_encode($file)}}"/>
//I am able to see the image in this tag

现在使用 onclick 功能来编辑附加信息，用户也可以更改图像，但为此我需要读取此图像，单击时应将其粘贴到具有此 id 的图像标签中

<img style="max-width:400px;" src="" id="imgretprd">

我研究了一下，才知道这段代码

var reader = new FileReader();

 reader.addEventListener("load", function () {
   preview.src = reader.result;
 }, false);

 if (file) {
   reader.readAsDataURL(file);
 }

但我不知道如何使用它。

【问题讨论】：

标签： javascript php image

【解决方案1】：

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

JS Bin

这是来自 MDN 的 Demo，但我找不到源网络。

也许这对你有帮助。

【讨论】：

【解决方案2】：

您可以像使用 Javascript 一样设置图像属性

var imageFile='Base64 String'
document.getElementsByTagName("img")[0].setAttribute("src",imageFile);

使用 Jquery

$("img").attr("src",imageFile);

Fiddle

【讨论】：

【解决方案3】：

您根本不需要 FileReader。复制图像源就像将 src 属性从一个分配到另一个一样简单：

// for each clickable image, add a 'click' event listener
document.getElementById('clickable-image-id').addEventListener('click',function() {
  // set the target source to this image source
  document.getElementById('imgretprd').src = this.src;
});

或 jQuery：

jQuery(function($) {
  $('.clickable-images').click(function() { 
    $('#imgretprd').attr('src',$(this).attr('src')); 
  });
});

【讨论】：