从读取图像 <img> 标签并将图像粘贴到另一个img标签中
[英]Reading an image from <img> tag and pasting the image in another img tag
问题描述
I have a image from Php database and is in this format 
我有来自Php数据库的图像，并且采用这种格式
<img src="data:image/jpeg;base64,{{base64_encode($file)}}"/>
//I am able to see the image in this tag
now an onclick function is used to edit the information attached as well as user can also change the image but for that I need to read this image and when clicked it should be pasted into a image tag with this id 现在，一个onclick函数用于编辑附加的信息，用户也可以更改该图像，但是为此，我需要读取该图像，并且单击该图像时应将其粘贴到具有此ID的图像标签中
<img style="max-width:400px;" src="" id="imgretprd">
I researched a bit and came to know about this code 我研究了一下，才知道这段代码
var reader = new FileReader(); var reader = new FileReader（）;
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
But I am not sure how to use it. 但是我不确定如何使用它。
3 个解决方案
解决方案1
0 2016-08-26 04:14:09
<!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>
Here is a Demo from MDN, but I can't find the source web. 这是MDN的演示，但我找不到源Web。
Maybe this can help you. 也许这可以帮助您。
解决方案2
0 2016-08-26 04:15:34
解决方案3
0 2016-08-26 04:47:14
You don't need FileReader at all. 您根本不需要FileReader。 Copying an image source is as simple as assigning the src attribute from one to the other: 复制图像源就像将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;
});
or jQuery: 或jQuery：
jQuery(function($) {
$('.clickable-images').click(function() {
$('#imgretprd').attr('src',$(this).attr('src'));
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.