图片压缩传输

Posted 2021-01-15 cwmizlp

在注册时有时需要传输身份证照片，但现在手机相片动不动就是5,6兆，传输速度太慢，因此压缩一下。

 

对图片压缩

 

 1 var canvas = document.createElement("canvas");
 2 var ctx = canvas.getContext(‘2d‘);
 3 // 瓦片canvas
 4 var tCanvas = document.createElement("canvas");
 5 var tctx = tCanvas.getContext("2d");
 6 var maxsize = 100 * 1024;
 7 //使用canvas对大图片进行压缩
 8 function compress(img) {
 9     //var initSize = img.src.length;
10     var width = img.width;
11     var height = img.height;
12     var bili = 1;
13     if (width > 480) {
14         bili = 480 / width;
15     } else {
16         if (height > 640) {
17             bili = 640 / height;
18         } else {
19             bili = 1;
20         }
21     }
22     //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
23     var ratio;
24     if ((ratio = width * height / 4000000) > 1) {
25         ratio = Math.sqrt(ratio);
26         width /= ratio;
27         height /= ratio;
28     } else {
29         ratio = 1;
30     }
31     canvas.width = width;
32     canvas.height = height;
33     // 铺底色
34     ctx.fillStyle = "#fff";
35     ctx.fillRect(0, 0, canvas.width, canvas.height);
36 
37     //如果图片像素大于100万则使用瓦片绘制
38     var count;
39     if ((count = width * height / 1000000) > 1) {
40         count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
41         //计算每块瓦片的宽和高
42         var nw = ~~(width / count);
43         var nh = ~~(height / count);
44         tCanvas.width = nw;
45         tCanvas.height = nh;
46         for (var i = 0; i < count; i++) {
47             for (var j = 0; j < count; j++) {
48                 tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
49                 ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
50             }
51         }
52     } else {
53         ctx.drawImage(img, 0, 0, width, height);
54     }
55     //进行最小压缩
56     var ndata = canvas.toDataURL(‘image/jpeg‘, bili);
57     tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
58     return ndata;
59 }

 

 

在控件选中图片时，对图片调用这个方法，常常获取不到图片的长宽，作如下操作

       //创建对象
        var img2 = new Image();
        img2.onload = function () {
            img2 = compress(img2);

            //document.getElementById("imgPhoto").setAttribute("value", img2);
        }
        // 改变图片的src
        img2.src = imgArr[i];

 

 

此时便可以获取压缩过后的img的Base64位编码

将此编码设置为图片的Src属性，可以显示成图片。

 

在进行表单提交时有时文件过大，表单会提交失败，

1   <system.web>
2     <httpRuntime maxRequestLength="102400" executionTimeout="360"/>
3   </system.web>

设置以上属性便可。

 

在表单提交时如果设置  input  属性  disabled=true   则这项数据不会被提交 , disabled=false  则会提交

 

 

 string ImgPath = HttpContext.Current.Server.MapPath("/idcard/" + PicID + ".jpg");
             Base64StringToImage(ImgBase64, ImgPath);

 

 1         private static void Base64StringToImage(string inputStr,string  ImgPath )
 2         {
 3             if (string.IsNullOrWhiteSpace(inputStr))
 4                 return;
 5             try
 6             {
 7                 string filePath = ImgPath;
 8                 byte[] arr = Convert.FromBase64String(inputStr.Substring(inputStr.IndexOf("base64,") + 7).Trim(‘‘));
 9                 using (MemoryStream ms = new MemoryStream(arr))
10                 {
11                     Bitmap bmp = new Bitmap(ms);
12                     //新建第二个bitmap类型的bmp2变量。
13                     Bitmap bmp2 = new Bitmap(bmp, bmp.Width, bmp.Height);
14                     //将第一个bmp拷贝到bmp2中
15                     Graphics draw = Graphics.FromImage(bmp2);
16                     draw.DrawImage(bmp, 0, 0);
17                     draw.Dispose();
18                     bmp2.Save(filePath, System.Drawing.Imaging.ImageFormat.Jpeg);
19                     ms.Close();
20                 }
21 
22             }
23             catch (Exception ex)
24             {
25 
26             }
27         }
28    

 

 

C# 后台进行保存图片。