0

I am writing a web based app that lets the user crop an image then save it to his/her computer then show it in the html. I am successful on cropping the image and saving it into the computer however I am having problems displaying it in the html. It does not show anything.

Here is the code in my controller that saves the cropped image:

string base64 = Request.Form["imgCropped"];
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);

using (FileStream stream = new FileStream(@"D:\CroppedPhotos\myPhoto.jpg", FileMode.Create, FileAccess.ReadWrite, FileShare.ReadWrite))
{

     using (BinaryWriter bw = new BinaryWriter(stream))
      {
          bw.Write(bytes);
          bw.Close();
      }
 stream.Close();
}

Note: the image is from an html canvas. I put value in imgCropped by using the canvas.toDataURL

Here is the code in my html that should show the cropped image:

<img src="D:\CroppedPhotos\myPhoto.jpg" width="424" height="476">
Shinogu
  • 1
  • you can't use a path on disk as the src of an image in HTML. The image is loaded via a HTTP request coming from the user's browser. The browser cannot see the server's disk (or indeed, the disk on the computer it is running on). You need to provide a valid URL to the image on the server e.g. `http://www.example.com/images/myPhoto.jpg` or something like that. The image file must be accessible by the webserver. – ADyson Apr 20 '18 at 09:08
  • @ADyson I do not think that this is the answer. Because, whenever I use another image(not created by my app) to test, the image is displayed in the browser even though I am using a disk path. – Shinogu Apr 20 '18 at 09:24
  • that may be simply because you're currently testing via localhost (i.e. client and server on the same physical machine). It would never work in a real server environment. You will never see a real website specifying images as a disk path. So in any case, if you want this code to work for real you need to change to using URLs. – ADyson Apr 20 '18 at 09:27
  • Anyway if that's not the cause of this specific issue, then either your form is not sending a correct base64 string, or the writing to disk is going wrong. Once you've saved this image file to disk, can you open it in another program such as the standard windows image viewer, or not? That way we can separate the problem from the issue of the browser display. – ADyson Apr 20 '18 at 09:28
  • P.S you can verify your base64 string by going here: https://jsfiddle.net/casiano/xadvz/ and replacing the string in the code with the string generated by your code (use the C# debugger to stop on that line and copy the value). If it doesn't generate a valid image, then that points to the root of your problem. – ADyson Apr 20 '18 at 09:30
  • @ADyson yes, I can open it in another program. Just to add, when I edit the image in another program then save it, the image will display in the browser. I suspect that there is something wrong going on in the way I save the Image. I will get back to you about the base64 verification as I already gone home. :) – Shinogu Apr 20 '18 at 10:16
  • If you can open the cropped image file produced by your code in another program without issue, that implies to me that the image is not corrupt. When you say you "edit in another program and save it", what changes are you making, exactly? And what program did you use? Perhaps it can tolerate some corruption in some way. Can you open the version produced by your code in the regular Image Viewer, as I mentioned? – ADyson Apr 20 '18 at 10:28
  • I can open it in mspaint and the default photo viewer of windows 10. I am not exactly editing the image, just opening it and then save. I think the photo viewer or mspaint must have been correcting the error in the image. – Shinogu Apr 20 '18 at 10:49
  • Maybe try simply `File.WriteAllBytes((@"D:\CroppedPhotos\myPhoto.jpg", Convert.FromBase64String((base64.Split(',')[1]));` to save it, if that's the issue (and not the base64). Lots of discussion and alternative suggestions here as well: https://stackoverflow.com/questions/5400173/converting-a-base-64-string-to-an-image-and-saving-it – ADyson Apr 20 '18 at 11:03

1 Answers1

0

I solved this by copying the generated image in the solutions folder. Turns out (to my case) that the generated images should be inside the solution for it to work and be displayed in the browser.

<img src='/Content/Cropped/" + data + ".jpg'>
Shinogu
  • 1