(c#.net)前端js图片压缩将得到的base64字符串保存为图片

Posted 2020-06-25 远方的终点

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了(c#.net)前端js图片压缩将得到的base64字符串保存为图片相关的知识，希望对你有一定的参考价值。

<script src="jquery-1.7.2.min.js"></script>
<body>
    <input type="file" id="img" name="img" />
    <img id="test" src="" />
    <input type="button" id="submit" value="确定" onclick="submit()" />
    <script>
            
        function submit() {
            var f = document.getElementById("img").files[0];
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    var i = document.getElementById("test");
                    i.src = event.target.result;
                    var data = compress(i, 50);
                    var fd = new FormData();
                    fd.append("img", data);
                    $.ajax({
                        url: "webform1.aspx?type=upload",
                        type: "POST",
                        data: fd,
                        processData: false,  // 告诉jQuery不要去处理发送的数据
                        contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                        success: function (data) {
                            $(".loadingbox").hide();
                            if (data == 0)
                                myalert("提示", "保存失败");
                            else
                                myalerttoone("提示", "保存成功", "share.html");
                        }
                    });
                };
            })(f);
            reader.readAsDataURL(f);
        }

        function compress(source_img_obj, quality, output_format){

            var mime_type = "image/jpeg";
            if(output_format!=undefined && output_format=="png"){
                mime_type = "image/png";
            }


            var cvs = document.createElement(‘canvas‘);
            //naturalWidth真实图片的宽度
            cvs.width = source_img_obj.naturalWidth;
            cvs.height = source_img_obj.naturalHeight;
            var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
            return cvs.toDataURL(mime_type, quality/100);
        }
    </script>
</body>

前端代码

protected void Page_Load(object sender, EventArgs e)
        {
            Base64StringToImage(Request.Form["img"]);
        }

        private void Base64StringToImage(string inputStr)
        {
            if (string.IsNullOrWhiteSpace(inputStr))
                return;
            try
            {
                string filePath = "E:\\bb.jpg";
                byte[] arr = Convert.FromBase64String(inputStr.Substring(inputStr.IndexOf("base64,") + 7).Trim(‘\0‘));
                using (MemoryStream ms = new MemoryStream(arr))
                {
                    Bitmap bmp = new Bitmap(ms);
                    //新建第二个bitmap类型的bmp2变量。
                    Bitmap bmp2 = new Bitmap(bmp, bmp.Width, bmp.Height);
                    //将第一个bmp拷贝到bmp2中
                    Graphics draw = Graphics.FromImage(bmp2);
                    draw.DrawImage(bmp, 0, 0);
                    draw.Dispose();
                    bmp2.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);
                    ms.Close();
                }
               
            }
            catch (Exception ex)
            {
              
            }
        }

后端代码

以上是关于(c#.net)前端js图片压缩将得到的base64字符串保存为图片的主要内容，如果未能解决你的问题，请参考以下文章

前端图片压缩上传(纯js的质量压缩，非大小压缩)