我在网络应用程序中有一个代码片段,用于拍摄快照或从客户端设备上传图像文件,以前它完美无缺!我也成功地重新调整了图片的大小"在飞行中#34;。几天后它停止工作了。有没有人知道浏览器中是否有最新的更新可能会导致这种情况? 我给了javasctipt和用于完成工作的html部分..
HTML
...
<div style="text-align: center;">
<label class="cameraButton">
<input type="file" id="camera" onchange="previewFile();" capture="camera" accept="image/*;capture=camera">
<img src="images/click_to_shoot.png" id="Image1" runat="server" class="newpic" alt="" style="margin-top: 20px; width: 50%; height: auto; border: 1px solid;" />
</label>
</div>
<asp:HiddenField ID="hfLocalStorage" Value="@" runat="server" />
<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #d3d3d3; background-color: lightgray; display: none;"></canvas>
...
JS:
function previewFile() {
var preview = document.getElementsByClassName('newpic')[0];
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
var rr = reader.result.replace('data:image/jpeg;base64,', '');
preview.src = 'data:image/jpeg;base64,' + rr;
document.getElementById('<%=hfLocalStorage.ClientID%>').value = rr;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = preview;
var wrh = img.width / img.height;
var newWidth = c.width;
var newHeight = newWidth / wrh;
if (newHeight > c.height) {
newHeight = c.height;
newWidth = newHeight * wrh;
}
var startx = (c.width - newWidth) / 2;
var starty = (c.height - newHeight) / 2;
ctx.drawImage(img, startx, starty, newWidth, newHeight);
makeproper();
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
提前谢谢