Android照片上传切断图像？答案

【问题标题】：Android photo upload cutting off image?Android照片上传切断图像？
【发布时间】：2015-04-11 16:54:25
【问题描述】：

我正在开发一个应用程序，该应用程序允许用户通过HTML 输入元素从他们的智能手机上传照片。基本流程是他们点击输入元素，选择相机，拍照，然后显示在预览窗口中。当他们提交表单时，图像是scaled down to 1200x900，并且调整后图像的base64 dataURL 保存到SQL 数据库中，因此我可以直接将其用作详细信息页面上<img> 的src。

剃须刀/Html：

Attach Image:
<input type="file" accept="image/*;capture=camera" onchange="picChange(event)" style="width:100%;margin-bottom:5px;"/>
<span id="fileSizeinfo"></span>
<img id="capturedPhoto" src="~/Content/Images/cameraglyph_1x.png" style="border-radius:5px;background-color:darkgray;border:solid;display:block;margin:auto;width:100%;" />

@Html.TextBoxFor(model => model.Photo, new {  @hidden="hidden", id="photoData"})

JavaScript：

function picChange(evt) {
var fileInput = evt.target.files;
if (fileInput.length > 0) {
    var photoImg = document.getElementById("capturedPhoto");
    var photoData = document.getElementById("photoData");
    var filesizeSpan = document.getElementById("fileSizeinfo");

    var photo = evt.target.files[0];
    var reader = new FileReader();
    filesizeSpan.textContent = Math.round(photo.size * 0.000001) + 'Mb(s) - ' + Math.round(photo.size * 0.001) + 'kbs';

    reader.onload = function (theFile) {
        var img = new Image();
        img.onload = function () {

            var aspectRatio = img.width / img.height;
            var desiredWidth = 1200;
            var desiredHeight = desiredWidth / aspectRatio;

            var photoCanvas = document.createElement('canvas');
            photoCanvas.width = desiredWidth;
            photoCanvas.height = desiredHeight;

            var ctx = photoCanvas.getContext('2d');
            ctx.drawImage(img, 0, 0, desiredWidth, desiredHeight);

            var imageData = photoCanvas.toDataURL();
            photoImg.src = imageData;
            photoData.value = imageData; 
        }
        img.src = theFile.target.result;
    }
    var photoSrc = reader.readAsDataURL(photo);
}
}

当我点击手机上的元素时，我会得到正确的相机/图库对话框以从中选择图片：

如果我选择相机，然后保存它在预览窗口中正确显示的图像。预览是一个 img 元素，它的 src 设置为刚刚拍摄的缩小图片的 dataURL。

提交后，如果我查看详细信息页面，我的所有相机图像如下所示：

它们总是被突然切断，尽管它被正确地调整为1200x900。我想也许 dataURL 太长了，所以我用我的桌面上传了一张 11Mb 的图片，它调整了大小并正确显示，所以它肯定与使用手机有关。降低相机的分辨率可以解决问题，但我需要尽可能高分辨率的源图像，然后再缩小它们（精密工业工作）。

上传时相机照片通常在3Mb 附近。奇怪的是，它们在预览窗口中正确显示，它使用保存到数据库中的相同 dataURL 字符串！

测试于：

Android KitKat 4.4.2
Android Web Browser & Chrome Mobile

【问题讨论】：

很难弄清楚我们的问题。如果您只使用默认浏览器进行测试，我建议您测试其他浏览器，包括 Chrome 移动版、Firefox。此外，需要测试其他不同操作系统版本的安卓手机。例如，4.1.2 (Jellybean)、4.4 (Kitkat) 或 Lollipop (5.0)。
我用android默认浏览器测试过，还有chrome mobile。奇巧 4.4.2。我应该在问题中添加这个。
我认为你的问题在于 html 而不是在相机中，因为你说相同的 url 在预览中正确显示对吗？
你是对的。在详情页面，上传的图片使用 FancyBox 显示。但是，从我的桌面上传一张非常大的图像（11mb）并没有产生相同的截止图像，它工作得很好。预览窗口使用与上传到数据库的图像相同的 dataURL 来显示图像。
文件大小分辨率降低的捕获图像怎么办？这个问题只发生在 3Mb 左右吗？ 1,2,5Mb 怎么样？

标签： android sql image asp.net-mvc-5 camera

【解决方案1】：

原来答案是 Chrome 网络浏览器的问题。在 android 上，HTML 文本框必须有某种字符限制，而 PC 上的 IE11 没有限制。我只是将提交 URI 的字段切换为 TextArea 字段，问题就消失了，无需进行其他更改。

【讨论】：