XMLHttpRequestで画像を扱う

XMLHttpRequestで画像を読み込む

Ajaxで一部のWebデータを読み込む時、XMLHttpRequestを使いますが、テキストデータが主に読み込みの対象となっているので今回は画像データを読み込みたいと思います。

読み込み方はテキストと同じで、 読み込んだ画層データをBlobかArrayBufferとして処理するだけでOKです。

Blobによる読み込み

view plainprint?

1. <!--doctype html-->  
2.   
3.     
4.     <meta charset="UTF-8">  
5.     <title>XMLHttpRequest</title>  
6.     
7.   
8.   <div id="base">  
9.  <h1>XMLHttpRequest</h1>  
10.  <form>  
11.       <input id="btn" type="button" value="read">  
12.  </form>  
13.  <div id="res"></div>  
14.   </div>  
15.   <script>  
16.   
17.    //XMKHttpRequestで画像読込  
18.      
19.    document.addEventListener("DOMContentLoaded", function() {  
20.   
21.   var btn = document. getElementById("btn");  
22.   var res = document.getElementById("res");  
23.   
24.   //ボタンクリックによりXMLHttpRequestで読込  
25.   btn.addEventListener("click", function() {  
26.     var xhr = new XMLHttpRequest();  
27.     //読み込む画像ファイル  
28.     var path = "ika1.png";  
29.   
30.     xhr.open("GET", path, true);  
31.   
32.     //タイプ指定を忘れずに  
33.     xhr.responseType = "blob";  
34.       
35.     xhr.onreadystatechange = function(e) {  
36.   
37.    if(xhr.readyState == 4 && xhr.status == 200) {  
38.   
39.      //var blob = e.target.response;  
40.      var blob = xhr.response; //どちらも同じ  
41.        
42.      res.innerHTML = '<img src="' + URL.createObjectURL(blob) + '" />';  
43.    };  
44.     };  
45.   
46.     xhr.send(null);  
47.   
48.   }, false);  
49.   
50.    }, false);  
51.   
52.   </script>  

  
    
    
  

  

 
XMLHttpRequest
 

      
 
 

  
  

もう一つの例

view plainprint?

1. <!--doctype html-->  
2.   
3.     
4.     <meta charset="UTF-8">  
5.     <title>XMLHttpRequest</title>  
6.     
7.   
8.   <div id="base">  
9.  <h1>XMLHttpRequest</h1>  
10.  <form>  
11.       <input id="btn" type="button" value="read">  
12.  </form>  
13.  <div id="res"></div>  
14.   </div>  
15.   <script>  
16.   
17.    //XMKHttpRequestで画像読込  
18.      
19.    document.addEventListener("DOMContentLoaded", function() {  
20.   
21.   var btn = document.getElementById("btn");  
22.   var res = document.getElementById("res");  
23.   
24.   //ボタンクリックによりXMLHttpRequestで読込  
25.   btn.addEventListener("click", function() {  
26.     var xhr = new XMLHttpRequest();  
27.     //読み込む画像ファイル  
28.     var path = "画像.png";  
29.   
30.     xhr.open("GET", path, true);  
31.   
32.     xhr.responseType = "blob";  
33.       
34.     xhr.onreadystatechange = function(e) {  
35.   
36.    if(xhr.readyState == 4 && xhr.status == 200) {  
37.      //タイプを指定  
38.      var blob = new Blob([xhr.response], {type: "image/png"});  
39.   
40.      res.innerHTML = '<img src="' + URL.createObjectURL(blob) + '" />';  
41.    };  
42.     };  
43.   
44.     xhr.send(null);  
45.   
46.   }, false);  
47.   
48.    }, false);  
49.   
50.   </script>  

  
    
    
  

  

 
XMLHttpRequest