사용자가 업로드 한 이미지를 어떻게 처리합니까?

저는 현재 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

사용자가 업로드 한 이미지를 어떻게 처리합니까?

답변

관련 문제