Прочитать уменьшенное изображение, снятое с камеры телефона

Мне нужно сделать снимок с помощью камеры телефона, прочитать исходное захваченное изображение, показать миниатюру снятого изображения на экране и выполнить некоторые манипуляции с изображением на миниатюре. Мне удалось прочитать исходное изображение, полученное с моего устройства 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 ответа

Решение

http://jsbin.com/jadujuyu/1/

Рабочий пример с последней загрузкой и ясным, ваш пример построен с загрузкой 2.X.

После прочтения изображения.

        var img = new Image;
        img.src = capturedImage;
        var ctx = imageCanvas.getContext('2d');            
        ctx.drawImage(img, 0, 0,canvas.width,canvas.height);

Просто нужно добавить параметры изменения размера на холст drawImage

Другие вопросы по тегам