Прочитать уменьшенное изображение, снятое с камеры телефона
Мне нужно сделать снимок с помощью камеры телефона, прочитать исходное захваченное изображение, показать миниатюру снятого изображения на экране и выполнить некоторые манипуляции с изображением на миниатюре. Мне удалось прочитать исходное изображение, полученное с моего устройства Android, с помощью http://www.html5rocks.com/en/tutorials/file/dndfiles/
Теперь я хочу получить миниатюру в качестве переменной изображения и скопировать ее на холст и выполнить манипуляции с изображениями на холсте. Из-за того, что исходное изображение слишком велико, когда я показываю его на холсте, я получаю огромный холст, поэтому я решил сделать это на миниатюре. Я пытался здесь - http://www.jasny.net/articles/jasny-bootstrap-file-upload-with-existing-file/ но мне не удалось получить ссылку на миниатюру в моем коде JavaScript? мой код HTML5:
<div class="fileupload fileupload-exists" data-provides="fileupload" data-name="myimage">
<div class="fileupload-new thumbnail" style="width: 200px; height: 350px;"><img src="images/image.gif" id="selected-image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 350px; line-height: 20px;">
<img class="img-responsive" id="my-image" src="images/image.gif" />
</div>
<div>
<span class="btn btn-file btn-link btn-sm btn-default">
<input type="file" id="files" name="files[]" multiple />
</span><a id="remove-button" href="#" class="btn btn-sm fileupload-exists" data-dismiss="fileupload"
>Remove</a>
</div>
</div>
2 ответа
Рабочий пример с последней загрузкой и ясным, ваш пример построен с загрузкой 2.X.
После прочтения изображения.
var img = new Image;
img.src = capturedImage;
var ctx = imageCanvas.getContext('2d');
ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
Просто нужно добавить параметры изменения размера на холст drawImage