Android 照片上传截图？

Question

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

Razor/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);
}
}

当我单击 phone 上的元素时，我得到正确的 camera/gallery 对话框到 select 图片来自：

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

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

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

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

测试于：

Android KitKat 4.4.2
Android Web Browser & Chrome Mobile

Answer 1

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

Android 照片上传截图？

Android photo upload cutting off image?

sql

camera

android

image

asp.net-mvc-5