借助Canvas上传图片

HTML代码

<canvas id="canvas" >
</canvas>
<input id="file" type="file" />

　

　Js代码

$(":file").on('change', function () {
                var file = this.files[0];
                var url = webkitURL.createObjectURL(file);
                var img = new Image();
                img.onload = function () {
                    var width = img.width,
                        height = img.height;

                    var canvas = $("#canvas");
                    var ctx = canvas[0].getContext('2d');
                    canvas.attr({  width, height: height });
                    ctx.drawImage(img, 0, 0, width, height);
                    var base64 = canvas[0].toDataURL();
                    var base64Data = base64.substr(22);
                    $.post("Html5UseCamera.aspx?action=upload", { "img": base64Data }, function (data, status) { }, "text");
                }
                img.src = url;
            });

　　

　C# 后台接收图片并保存

 byte[] imgBytes = Convert.FromBase64String(Request.Form["img"]);
            Stream stream = new MemoryStream(imgBytes);
            System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
            image.Save(Server.MapPath("~/") + Guid.NewGuid().ToString() + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);