<img>タグから画像を読み取り、別のIMGタグ

に画像を貼り付けるIは、PHPデータベースから画像を有しており、このフォーマットで<img>タグから画像を読み取り、別のIMGタグ

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

今onclickの機能は同様に付加情報を編集するために使用されていますまた、ユーザーは、画像を変更することができますが、そのために、私は、この画像を読み取ると、クリックされたとき、私が少しを調査し、このコード

について知るようになった

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

このIDの画像タグに貼り付けされなければならない必要があります

var reader =新しいFileReader（）;

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

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

しかし、私はそれを使用する方法がわかりません。ここで

出典

2016-08-26 Jijo Nair

<!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のデモですが、私はソースのWebを見つけることができません。

これはおそらくあなたを助けることができます。

出典

2016-08-26 04:14:09 TomIsion

あなたはできますが、すべてでFileReaderのを必要としないjqueryの

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

Fiddle

出典

2016-08-26 04:15:34 Arunkumar

使用

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

のようにJavascriptを使用して画像属性を設定することができます。画像ソースをコピーする一方から他方に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')); 
    }); 
});

出典

2016-08-26 04:47:14 derelict

<img>タグから画像を読み取り、別のIMGタグ

答えて

関連する問題