Jquery
Image 标签转Base64方法：
function getBase64Image(img) { var canvas = document.createElement("canvas"); var theImage = new Image(); theImage.src = img.attr("src"); canvas.width = theImage.width; canvas.height = theImage.height; var ctx = canvas.getContext("2d"); ctx.drawImage(theImage, 0, 0, theImage.width, theImage.height); var ext = theImage.src.substring(theImage.src.lastIndexOf(".") + 1).toLowerCase(); var dataURL = canvas.toDataURL("image/" + ext); return dataURL; }
使用：
web api:
处理图片数据：
var Pic = context.Request.Form["Pic"];//键值对字符串 key-图片格式，value if (string.IsNullOrEmpty(Pic)) return "图片没找到"; var imgStr = Pic.Split(',')[1];//base64 string path = ConfigurationManager.AppSettings["UplaodPath"];//获取当前项目所在目录 string ShowPath = ConfigurationManager.AppSettings["ShowPath"];//显示路径; //string suffix = "." + Pic.Split(',')[0].Split('/')[1].Split(';')[0] //文件的后缀名 string name=时间戳+后缀名；//图片名字
var imgStr = Pic.Split(',')[1];//base64 string path = ConfigurationManager.AppSettings["UplaodPath"];//获取当前项目所在目录 string ShowPath = ConfigurationManager.AppSettings["ShowPath"];//显示路径; //string suffix = "." + Pic.Split(',')[0].Split('/')[1].Split(';')[0] //文件的后缀名 string strPath = path + name; ImgInfo img = new ImgInfo(); img.Id = Guid.NewGuid().ToString("N"); img.ImgId = Guid.NewGuid().ToString("N"); img.ImgName = name; img.CreateDate = DateTime.Now; try { var connectionstr = @"Data Source=D:\ProJ\TestServiceIp\TestServiceIp\DB\TestImgBD.db3;Version=3;Journal Mode=WAL"; int row = 0; string msg= string.Empty; using (SQLiteConnection connection = new SQLiteConnection(connectionstr)) { if (connection.State != ConnectionState.Open) { connection.Open(); } using (SQLiteCommand cmd = connection.CreateCommand()) { DbTransaction trans = connection.BeginTransaction();//开始事务 cmd.CommandText = "insert into ImgTb(Id,ImgId,ImgName,CreateDate) values(@Id,@ImgId,@ImgName,@CreateDate)"; cmd.Parameters.Add(new SQLiteParameter("@Id", DbType.String)); cmd.Parameters.Add(new SQLiteParameter("@ImgId", DbType.String)); cmd.Parameters.Add(new SQLiteParameter("@ImgName", DbType.String)); cmd.Parameters.Add(new SQLiteParameter("@CreateDate", DbType.DateTime)); cmd.Parameters["@Id"].Value = img.Id; cmd.Parameters["@ImgId"].Value = img.ImgId; cmd.Parameters["@ImgName"].Value = img.ImgName; cmd.Parameters["@CreateDate"].Value = img.CreateDate; row = cmd.ExecuteNonQuery(); if (row > 0) { var success = ImageHelper.UpLoadImage(imgStr, path, strPath); if (!success) { cmd.Dispose(); msg= "图片上传失败"; } else { trans.Commit();//提交事务 如果上传图片也成功了那就提交事务 msg= "图片Path：" + ShowPath + name; } } else { cmd.Dispose(); msg= "数据库添加图片失败"; } } connection.Close(); return msg; } } catch (Exception) { return "出错了"; }
/// <summary> /// 上传图片 /// </summary> /// <param name="Base64Str">base64串</param> /// <param name="strPath">保存路径</param> /// <returns></returns> public bool UpLoadIma(string Base64Str, string strPath) { try { byte[] bit = Convert.FromBase64String(Base64Str); MemoryStream ms = new MemoryStream(bit); Bitmap bmp = new Bitmap(ms); bmp.Save(HttpContext.Current.Server.MapPath(strPath), ImageFormat.Jpeg); return true; } catch (Exception) { return false; } }
Type="file" 图片文件上传
<div class="fileWrap"> <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)" /> </div>
function upImg(obj) { var imgFile = obj.files[0]; var reader = new FileReader(); reader.onload = (function (file) { return function (e) { $.ajax({ url: "api/Values/UploadImg", type: "POST", datatype: "Json", data: { Pic: this.result, Name: imgFile.name }, success: function (data) { $("#ImgPath").append("<p>" + data + "</p>"); }, error: function (xhr) { console.log(xhr.responseText) } }); }; })(imgFile); reader.readAsDataURL(imgFile); };
上传图片实施预览：
<div class="content clearFlex"> <form action="" enctype="multipart/form-data"> <div class="upImg clearFlex"> <div class="imgOnloadWrap"></div> <div class="upWrap"> <div class="fileWrap"> <input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/> </div> <div class="imgWrap"> <img src="img/icon6.png" alt="" /> </div> </div> </div> </form> </div>
function upImg(obj){
var imgFile = obj.files[0];
console.log(imgFile);
var img = new Image();
var fr = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
fr.onload = function(){
var htmlStr = '<div class="upWrap">';
htmlStr += '<div class="fileWrap">';
htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>';
htmlStr += '</div>';
htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';
htmlStr += '<img src="'+fr.result+'" alt="" />';
htmlStr += '</div>';
htmlStr += '</div>';
$('.imgOnloadWrap').append(htmlStr);
obj.value = '';
}
fr.readAsDataURL(imgFile);
}
/*-----------------------------删除图片------------------------------*/
$(document).on('click','.upedImg .deleteImg',function(){
//处理未来事件
$(this).parent().parent().remove();
})
-----2020年9月21更新 后台base64转图片格式
//data:image/jpg;base64,xxxxx --base64格式 js string BaseStr='xxxxx' --js格式的后半部分 byte[] bytes2 = Convert.FromBase64String(BaseStr); MemoryStream memStream = new MemoryStream(bytes2); Image img = Image.FromStream(memStream); this.pictureBox1.Image = img;
浙公网安备 33010602011771号