图片压缩传输

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

对图片压缩

var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var maxsize = 100 * 1024;
//使用canvas对大图片进行压缩
function compress(img) {
    //var initSize = img.src.length;
    var width = img.width;
    var height = img.height;
    var bili = 1;
    if (width > 480) {
        bili = 480 / width;
    } else {
        if (height > 640) {
            bili = 640 / height;
        } else {
            bili = 1;
        }
    }
    //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
    var ratio;
    if ((ratio = width * height / 4000000) > 1) {
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
    } else {
        ratio = 1;
    }
    canvas.width = width;
    canvas.height = height;
    // 铺底色
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    //如果图片像素大于100万则使用瓦片绘制
    var count;
    if ((count = width * height / 1000000) > 1) {
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
        //计算每块瓦片的宽和高
        var nw = ~~(width / count);
        var nh = ~~(height / count);
        tCanvas.width = nw;
        tCanvas.height = nh;
        for (var i = 0; i < count; i++) {
            for (var j = 0; j < count; j++) {
                tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
            }
        }
    } else {
        ctx.drawImage(img, 0, 0, width, height);
    }
    //进行最小压缩
    var ndata = canvas.toDataURL('image/jpeg', bili);
    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    return ndata;
}

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

       //创建对象
        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属性，可以显示成图片。

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

  <system.web>
    <httpRuntime maxRequestLength="102400" executionTimeout="360"/>
  </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);

        private static void Base64StringToImage(string inputStr,string  ImgPath )
        {
            if (string.IsNullOrWhiteSpace(inputStr))
                return;
            try
            {
                string filePath = ImgPath;
                byte[] arr = Convert.FromBase64String(inputStr.Substring(inputStr.IndexOf("base64,") + 7).Trim(''));
                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# 后台进行保存图片。