Как мне обработать изображение, загруженное пользователем? - PullRequest
Новая
       0

Как мне обработать изображение, загруженное пользователем?

0 голосов
/ 24 января 2012

В настоящее время я изучаю HTML5 наряду с JavaScript.У меня есть кодировка, как это: 

<!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, поэтому будет хорошо, если сообщество поможет мне.

Заранее спасибо.

1 Ответ

1 голос
/ 11 февраля 2014

Вы можете использовать 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...