javascript / html5中的图像编码/解码

时间:2017-10-19 09:16:58

标签: javascript html html5

我在网络应用程序中有一个代码片段,用于拍摄快照或从客户端设备上传图像文件,以前它完美无缺!我也成功地重新调整了图片的大小"在飞行中#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);
            }
        }

提前谢谢

0 个答案:

没有答案