圖片壓縮傳輸

在註冊時有時須要傳輸身份證照片，但如今手機相片動不動就是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];

 

重大發現，因爲前段選擇文件時一般是 <input  type="file">  ,所以上面獲取圖片長寬的方法變了變

 

  var myimg=URL.createObjectURL(file);
  var img=new Image();
  img.src=myimg;
  img.onload=function()
      {
     var base64 =    that.compress(img);
       }

 

其中的 file  就是用 input 框選中的文件。

另外測了一下壓縮的能力。 原本 5M  的圖片， 大概壓縮到原來的三分之一。壓縮能力仍是能夠的。

 

 

 

 

 

此時即可以獲取壓縮事後的img的Base64位編碼

將此編碼設置爲圖片的Src屬性，能夠顯示成圖片。

 

在進行表單提交時有時文件過大，表單會提交失敗，

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

設置以上屬性即可。

 

設置最大 HTTP 請求大小限制

• 打開 IIS 控制檯
• 雙擊 ASP，展開限制屬性，修改醉倒請求實體主體限制爲須要的值（如10240000 即 10M） > ASP 文件中也有上傳文件大小的限制，不過先驗證的限制是 IIS 中設置的，因此若是 IIS 中設置最大 256K，那麼就算 ASP 中設置了最大 10M，那麼超過 256K 的文件也沒法上傳，並且 ASP 無法給出錯誤信息。

 

UEditor     給Action加一個Attribute：[ValidateInput(false)]，這樣只會讓該頁面不驗證提交的內容，而不會影響到其餘頁面。

 

在表單提交時若是設置  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('\0'));
 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# 後臺進行保存圖片。