0

我需要用手机摄像头拍摄图像，读取原始捕获的图像，在屏幕上显示捕获的图像缩略图，并对缩略图图像进行一些图像处理。在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>
4

2 回答 2

1

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

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

于 2014-05-25T14:26:56.127 回答
0

读完图后。

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

只需将调整大小参数添加到画布drawImage

于 2014-05-26T06:43:45.433 回答