Question

我需要使用手机摄像头拍摄图像，阅读原始拍摄的图像，在屏幕上显示捕获的图像缩略图，并对缩略图图像进行一些图像处理。我设法在http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-references

的帮助下阅读了从我的Android设备上拍摄的原始图像

现在我想将缩略图作为图像变量并将其复制到画布并在画布上进行图像处理。因为原始图像太大，当我在画布上显示它时，我会得到巨大的画布，所以我想在缩略图上做到这一点。我在这里试过 - 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>

Answer 1

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

使用最新的bootstrap和jasny的工作示例，您的示例是使用bootstrap 2.X构建的。

Answer 2

阅读图像后。

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

只需将resize参数添加到canvas drawImage

即可

阅读手机摄像头拍摄的缩略图

2 个答案: