从image src获取base64字符串

我使用下面的代码从image src获取base64字符串，但它不起作用。

 function showimagepreview(input) { if (input.files && input.files[0]) { var filerdr = new FileReader(); filerdr.onload = function (e) { $('#imgprvw').attr('src', e.target.result); $('#imageValue').val(e.target.result); } filerdr.readAsDataURL(input.files[0]); } } 

在控制器中，如何将’imageValue’的值作为base64字符串？

目前我得到’imageValue’的值是一个大字符串。

Answer 1

下面我粘贴的不仅仅是所需的问题。

一旦选择了文件，这将获得Base64String，这将在

。

假设您要将文件存储在项目中，也可以使用保存function。 🙂

HTML

   
 save 

JavaScript的

Home Controller>转换动作

 public void Convert(string Base64String) { string fileName = "test.jpg"; string rootpath = Server.MapPath(Path.Combine("~", "Image", fileName)); ConvertBase64ToFile.ConvertToFile(rootpath, Base64String.Split(',')[1]); } 

将Base64String转换为文件的类

 public class ConvertBase64ToFile { public static void ConvertToFile(string location, string file) { byte[] bytes = Convert.FromBase64String(file); File.WriteAllBytes(location, bytes); } } 

Answer 2

尝试使用ajax / javascript这样的东西…它将使用ajax数据参数将base64字符串发布到控制器，该参数作为datauri参数传递给控制器​​。

MyFunc会将图像转换为base64并将其发布到动作中。

 function MyFunc() { con.drawImage(v, 0, 0, canvasWidth, canvasHeight); var = document.getElementById('imgprvw'); dataURL = c.toDataURL('image/png'); var raw_image_data = dataURL.replace(/^data\:image\/\w+\;base64\,/, ''); $.ajax({ url: '@PathHelper.FullyQualifiedApplicationPath(Request)' + 'MySaveController/MySaveAction', type: 'POST', dataType: 'json', contentType: "application/x-www-form-urlencoded;charset=UTF-8", data: { datauri: JSON.stringify(raw_image_data), }, error: function (xhr) { alert('Error: ' + xhr.statusText); }, success: function (result) { alert('Image Saved'); } }); } 

在控制器中… MySaveAction将base64转换为位图，然后保存。

  public ActionResult MySaveAction(string datauri) { // Some stuff. if (datauri.Length > 0) { Byte[] bitmapData = new Byte[datauri.Length]; bitmapData = Convert.FromBase64String(FixBase64ForImage(datauri)); string fileLocationImageName = "C:/MYIMAGE.JPG"; MemoryStream ms = new MemoryStream(bitmapData); using (Bitmap bitImage = new Bitmap((Bitmap)Image.FromStream(ms))) { bitImage.Save(fileLocationImageName, System.Drawing.Imaging.ImageFormat.Jpeg); output = fileLocationImageName; } } return Json(output, JsonRequestBehavior.AllowGet); } 

Helper方法…这将给出ajax url参数所需的请求的完整限定路径。

 public static class PathHelper { public static string FullyQualifiedApplicationPath(HttpRequestBase httpRequestBase) { string appPath = string.Empty; if (httpRequestBase != null) { //Formatting the fully qualified website url/name appPath = string.Format("{0}://{1}{2}{3}", httpRequestBase.Url.Scheme, httpRequestBase.Url.Host, httpRequestBase.Url.Port == 80 ? string.Empty : ":" + httpRequestBase.Url.Port, httpRequestBase.ApplicationPath); } if (!appPath.EndsWith("/")) { appPath += "/"; } return appPath; } } 

最后这是对base64字符串的修复…即删除使用JSON.Stringify转换base64时插入的垃圾。

 public string FixBase64ForImage(string image) { System.Text.StringBuilder sbText = new System.Text.StringBuilder(image, image.Length); sbText.Replace("\r\n", String.Empty); sbText.Replace(" ", String.Empty); sbText.Replace("\"", String.Empty); return sbText.ToString(); }