ユーザーがアップロードした画像をどのように処理するのですか？

私は現在、JavaScriptと一緒にHtml5を学んでいます。私はこのようにコーディングしています：ユーザーがアップロードした画像をどのように処理するのですか？

<!DOCTYPE html> 
<html> 
<head> 
<title>Drop images and invert them</title> 
<style> 
body { margin: 0; body: 0; } 
canvas { margin: 30px auto 0; display: block; } 
</style> 
</head> 
<body> 
<canvas id="canvas"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementById('canvas'), 
    img = document.createElement('img'), 
    ctx = canvas.getContext('2d'); 
function xray() { 
    img.src = 'a1.jpg'; 
    ctx.drawImage(img, 0, 0); 
    var pixels = ctx.getImageData(0, 0, img.width, img.height); 

    for (var i = 0; i < pixels.data.length; i += 4) { 
    pixels.data[i+0] = 255 - pixels.data[i+0]; 
    pixels.data[i+1] = 255 - pixels.data[i+2]; 
    pixels.data[i+2] = 255 - pixels.data[i+1]; 
    } 
    ctx.putImageData(pixels, 0, 0); 
}; 

</script> 
<form onclick="xray()" method="post"> 
Select a file:<br> 
<input type="file" id="test" size="40"> 
</p> 
<div> 
<input type="button" value="View XRay"> 
</div> 
</form> 
</body> 
</html>

（これは私の本の一例です）。

実際にこの例では、スクリプトに与えられる画像はa1.jpg（この場合）であり、ユーザーがボタンをクリックすると、a1.jpgファイルが反転されてレンダリングされます。

私が現在行っていることは、ユーザーにファイルアップロードオプションを与えて、.jpgファイルをアップロードできることです。

ここでは、ユーザーがアップロードしたファイルを処理する必要があります。具体的には、a1.jpgを処理する必要があります。

私の質問はどうしたらいいですか？それは可能ですか？私はJavascriptをとても使い慣れているので、コミュニティが私を助けてくれれば良いでしょう。

ありがとうございます。

出典

2012-01-24 Ant' s

はおそらく、あなたがプロセス、それをこのサーバーサイドを行う必要があります。 – TJHeuvel

ああそう思ったので、クライアント側でこれを行う方法はありませんか？ –

私は本当にそれを本当に疑っています。ファイルのアップロードは非常に安全です。明白なセキュリティ問題のために何かを行うことはできません。おそらく、ajaxなどを介してアップロードすることもできます。 – TJHeuvel

FileReaderを使用すると、ファイルをDataURLとして読み取って<img>要素に適用し、既に使用しているようにimg要素を使用できます。ここで説明されています。ここでは

http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-filesは、上記のチュートリアルに基づいて、私が書いたコードです。それは、サーバーにアップロードされた後

function _reader_load_finished(ev) { 
    var img_input = document.getElementById('img_input'); 
    img_input.setAttribute('src', ev.target.result); 
    // Rest of your code here. 
    // Probably you need to add code only after the image has loaded, 
    // i.e., after <img> onload event. 
} 

function process_image(file) { 
    var reader = new FileReader(); 
    reader.addEventListener('load', _reader_load_finished, false); 
    reader.readAsDataURL(file); 
} 

function file_change_handler(ev) { 
    if (ev.target.files.length >= 1) { 
     process_image(ev.target.files[0]); 
    } 
} 

function dragover_handler(ev) { 
    ev.stopPropagation(); 
    ev.preventDefault(); 
    ev.dataTransfer.dropEffect = 'copy'; 
} 

function drop_handler(ev) { 
    ev.stopPropagation(); 
    ev.preventDefault(); 

    if (ev.dataTransfer.files.length >= 1) { 
     process_image(ev.dataTransfer.files[0]); 
    } 
} 

function onload_handler(ev) { 
    var input_file = document.getElementById('input_file'); 
    input_file.addEventListener('change', file_change_handler, false); 
    document.documentElement.addEventListener('dragover', dragover_handler, false); 
    document.documentElement.addEventListener('drop', drop_handler, false); 
} 

window.addEventListener('load', onload_handler, false);

出典

2014-02-11 18:23:51

ユーザーがアップロードした画像をどのように処理するのですか？

答えて

関連する問題