H5 压缩图片并上传

效果预览：

前端代码：

<style type="text/css">
    .weui-grid__label { font-size: small; }
    .txt-result { color: red; text-align: center; display: block; margin-top: 10px; }
    .fileinput-button input { position: absolute; right: 0px; top: 0px; opacity: 0; -ms-filter: 'alpha(opacity=0)'; }
    .fileinput-button { position: relative; display: inline-block; overflow: hidden; }
    .fileinput-button span { background: #1AAD19; color: white; padding: 3px 15px; border-radius: 5px; display: block; }
</style>
<div class="row">
    <div class="page__bd page__bd_spacing">
        <div class="weui-cells__title">
            <h3>
                上传图片</h3>
        </div>
    </div>
    <div class="page__bd page__bd_spacing">
        <div class="weui-cells__title">
            图片上传</div>
        <div class="weui-cells__title">
            <span class="fileinput-button"><span>上传图片</span>
                <input id="photo" type="file" accept="image/*" />
            </span>
            <br />
            <span class="size"></span>
        </div>
        <div class="weui-cells__title">
            图片预览</div>
        <div class="weui-cells__title" style="text-align: center">
            <img src="/Uploadfiles/nopic.jpg" alt="" class="preview" style="border: 0px solid #888;
                width: 100%; height: 150px; border-radius: 5px;" />
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#photo').change(function () {
                //loading("处理中，请稍候", 60000);
                var fileControl = $(this)[0];
                var file = fileControl.files[0];
                var fileType = file.type;
                //console.log(file.size);
                if (/image\/\w+/.test(fileType)) {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(file);
                    fileReader.onload = function (event) {
                        var result = event.target.result;
                        var image = new Image();
                        image.src = result;
                        image.onload = function () {
                            var canv = document.createElement('canvas');
                            var scale = 1;
                            //最大宽度和高度
                            var maxWidth = 1440;
                            var maxHeight = 900;
                            if (this.width > maxWidth || this.height > maxHeight) {
                                if (this.width > this.height) {
                                    //如果宽度大于高度，则根据宽度计算缩放比例，高度按比例缩放
                                    scale = maxWidth / this.width;
                                } else {
                                    //如果高度大于宽度，则根据高度计算缩放比例，宽度按比例缩放
                                    scale = maxHeight / this.height;
                                }
                            }
                            canv.width = this.width * scale;
                            canv.height = this.height * scale; //计算等比缩小后图片宽高  
                            var ctx = canv.getContext('2d');
                            ctx.drawImage(this, 0, 0, canv.width, canv.height);
                            var imageData = canv.toDataURL(fileType, 0.8);
                            var sendData = imageData.replace("data:" + fileType + ";base64,", '');
                            $.post('@Url.Action("LabCharacterUpload", "Route")', {
                                type: 'photo',
                                value: sendData
                            },
                                function (res) {
                                    //$('#loading').hide();
                                    res = $.parseJSON(res);
                                    if (res.IsSucess) {
                                        var data = res.Body;
                                        var arr = data.split("###");
                                        $('.preview').attr('src', arr[0] + "?_t=" + new Date().getTime());
                                        $(".size").text(arr[1]);
                                    } else {
                                        $(".size").text(res.Body);
                                    }
                                });
                        }

                    }
                }
            });

        })
    </script>
</div>

后端代码：

  public ActionResult LabCharacterUpload()
        {
            var result = new AjaxResult();
            try
            {
                string strbase64 = RequestHelper.GetParms("value");
                var name = DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
                var path = PathHelper.GetMapPath("~/Uploadfiles/temp/" + name);
                byte[] arr = Convert.FromBase64String(strbase64);
                using (MemoryStream ms = new MemoryStream(arr))
                {
                    using (Bitmap bmp = new Bitmap(ms))
                    {
                        bmp.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);
                        bmp.Dispose();
                    }
                    ms.Close();
                }
                var size = FileHelper.GetFileSizeString(path, 2);
                var txt = BaiduHelper.Ocr(path);
                result.Body = "/Uploadfiles/temp/" + name + "###" + size + "###" + txt;

                result.IsSucess = true;

            }
            catch (Exception ex)
            {
                result.IsSucess = false;
                result.Body = ex.Message;
            }
            return new ContentResult { Content = result.ToJson() };

        }

  public class AjaxResult
    {
        public bool IsSucess { get; set; }
        public string Body { get; set; }
    }

Demo演示