Android照片上传切断图像？

Question

我正在制作一款应用，允许用户通过HTML输入元素从智能手机上传照片。基本流程是他们点击输入元素，选择相机，拍照，然后它会显示在预览窗口中。当他们提交表单时，图片为scaled down to 1200x900，并且已调整大小的图片的base64 dataURL会保存到SQL数据库中，以便我可以直接将其用作{{1}的src在详细信息页面上。

剃刀/ HTML：

<img>

JavaScript的：

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"})

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

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

提交后，如果我查看详情页面，我的所有相机图片都如下所示：

它们总是被突然切断，但它被正确调整为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); } } 。我想也许dataURL太长了，所以我使用我的桌面上传了一张11Mb的图片，并且它调整了大小并正确显示，所以它肯定与使用手机有关。降低相机的分辨率可以解决问题，但是在缩小它们之前我需要尽可能高的源图像（精密工业工作）。

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

经过测试：

3Mb

Answer 1

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