h5上传图片之canvas(代码片段)

<script type="text/javascript">
    $(function () 
        $("#abtn_submit").click(function () 
            if ($("input[name=‘imgs‘]").length < 1) 
                layer.open(
                    content: ‘必须上传图片才能提交‘,
                    skin: ‘msg‘,
                    time: 2
                );
                return;
            
            $("form").submit();
        );
        $("#upimg").click(function () 
            $("#fileImage").click();
        )
        $("#fileImage").change(function () 
            $.each($(this)[0].files, function (i, e) 
                if (!/image\/\w+/.test(e.type)) 
                    //请确保文件为图像类型
                    return;
                
                imgHandle(e);
            )
        )
    );

    function imgHandle(_file) 
        var reader = new FileReader();
        reader.readAsDataURL(_file);
        reader.onload = function (e) 
            var result = e.target.result;
            var image = new Image();
            image.src = result;
            image.onload = function () 
                var cvs = document.createElement("canvas");
                var scale = 1;
                if (this.width > 1000 || this.height > 1000) 
                    if (this.width > this.height) 
                        scale = 1000 / this.width;
                    
                    else 
                        scale = 1000 / this.height;
                    
                
                cvs.width = this.width * scale;
                cvs.height = this.height * scale;
                var ctx = cvs.getContext("2d");
                ctx.drawImage(this, 0, 0, cvs.width, cvs.height);
                var newImageData = cvs.toDataURL(_file.type, 0.8);
                var imgdata = "<a href=‘javascript:‘ onclick=‘delimg(this)‘><img src=\"" + newImageData + "\" />";
                imgdata += "<input type=\"hidden\" name=\"imgs\" value=\"" + newImageData + "\" /></a>";
                $("#img_wrap").append(imgdata);
            
        
    

    function delimg(e) 
        layer.open(
            content: ‘您确定要删除此图片吗？‘,
            btn: [‘删除‘, ‘取消‘],
            skin: ‘footer‘,
            yes: function (index) 
                $(e).remove();
                layer.close(index);
            
        );
    
</script>

//有图片时处理如下
            string[] imgs = collection.GetValues("imgs");
            List<U_Img> uimglist = new List<U_Img>();
            int i = 1;
            foreach (string imgBase64Str in imgs)
            
                int indexOf = imgBase64Str.IndexOf(‘/‘) + 1;
                string ftype = imgBase64Str.Substring(indexOf, imgBase64Str.IndexOf(‘;‘) - indexOf);
                string fex = ".jpg";
                switch (ftype)
                
                    case "jpeg":
                    case "jpg":
                        fex = ".jpg";
                        break;
                    case "png":
                        fex = ".png";
                        break;
                    case "gif":
                        fex = ".gif";
                        break;
                
                string Base64Str = imgBase64Str.Substring(imgBase64Str.IndexOf(‘,‘) + 1);
                Base64Str = Base64Str.Trim(‘\0‘);
                byte[] imgArr = Convert.FromBase64String(Base64Str);
                using (MemoryStream ms = new MemoryStream(imgArr))
                
                    Bitmap bmp = new Bitmap(ms);
                    string fname = "/timg/" + DateTime.Now.ToString("yyMMddmmHHssffff") + i.ToString() + fex;
                    string FilePath = Request.MapPath(fname);
                    bmp.Save(FilePath);
                    uimglist.Add(new U_Img()  ImgUrl = fname, ImgTime = DateTime.Now );
                
                i++;