If one visits jQuery-File-Upload Demo page and will try to upload an image, and then will look at the JSON response, he would notice that a preview of an uploaded image is returned in a format:
"thumbnail_url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAI...
As far as I understand, an images is getting transformed into string and sent back to the client.
How can I do it in C# to impelement ASP.NET back end for the same demo?
I remember reading an answer to a question a while back by the very competent competent_tech and thinking "I never knew you could do that!"
In that answer is an example about how to set the src of an ASP.Net image to be the base64 encoded data you see above.
It effectively boils down to setting the src of an ASP:Image control as follows:
imgCtrl.Src = #"data:image/gif;base64," + Convert.ToBase64String(File.ReadAllBytes(Server.MapPath(#"/images/your_image.gif")));
Remember to change the content type depending on the image!
Related
I am just starting to learn Jquery and working on asp.net webform app that will be used on a touchscreen device, and I need to capture user signature, basically user will sign and after hit save, I want their signature to be saved as an image to SQL server database so I can retrieve and display it later on a webpage.
I found this question: Capture Signature using HTML5 and iPad
and the jQuery plugin works great, exactly as I want.
Here the demo: http://szimek.github.io/signature_pad
Here the plug-in: https://github.com/szimek/signature_pad
So on the demo I see after hit "save" you will go to a new tab that display an image of your signed signature, and I noticed that the url is something like
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApIAAAE+CAYAAAA+vvBuAAAgAElEQVR4Xu3df8i37V0X8I/l0GY5BzZdiWslKhnNUaBR62lBP0htjuiHfz0uROgPmQsH/hE8jiKKjLl/IoLa9k+NMOYyhCRamyM0WI9bUBst5kzbUNfjxBlmaLy389jO+3q......
What does this url mean?
what type of variable will be used to store this in database table (nvarchar, binary...)
3 (MAIN QUESTION). How do I get those data text in code behind C# button click event to store them to a string variable for other purposes. Can someone provide a simple example so i can go from there?
if I am missing something please let me know, as I am looking at the .html file and those .js files in the demo project of that plugin, I am lost.
That URL is in BASE64 format. You can use that long string of characters in the SRC attribute of an image tag and it will be displayed.
To get better performance, the recommended way of storing photos is to store the image on the disk (using some kind of server side language) and then save the name of the file in a database as a CHAR or TEXT.
Not quite sure. I've never used the library before.
That is a Base64 encoded image.
data: says that data is following instead of a URL
image/png; specifies the content "mimetype" the data should be served as
base64, indicates the encoding type of the data
As base64 only uses ASCII characters, a varchar(MAX) would be suitable for storage. No need for nvarchar. I normally store the base64 encoding only (the last part after the comma), and keep the mime-type (e.g. image/png) in a separate field.
There are many options in C#. If you store the base64 part separately, you simplify the code a bit.
Turn it into an image server-side using byte[] imageBytes = System.Convert.FromBase64String(base64data) and creating an image from the byte array and type.
Inject the image into a webpage <img src="#Html.Raw("data:"+ mimetype + "base64," + base64data)"/>
Notes:
As #anthony mentions, your would typically store images as files (or in Blob storage nowadays) and only record the filename/URI. This depends on quantity size & usage.
We have found it convenient, for certain projects requiring extra security, for base64 images to be stored as encoded & encrypted strings in a database.
From comments: To save to, place the string value into a hidden input and update its value. It will then get posted back like any other string. Our own signature plugin just hides the original <input type="text"> it is attached to and puts the value there.
In addition to TrueBlueAussie's answer:
The simplest way to get your string in CodeBehind is:
Declare a HiddenField using ASP and assign a Static ID to it. (Static ID is important since ASP normally assigns automatically generated IDs to each control, and this can get difficult to predict).
Shape your JavaScript function in a way that SignaturePad writes the output base64 image string into this HiddenField. You can for example, use a button "Verify" that calls the Export function of the SignaturePad.
After the string is written into the HiddenField, read it back on CodeBehind. For this, you can use an additional button, for example something like "Save".
There are of course other options which are much more secure/versatile/appropriate, but this might be a good starting point for you.
Wee bit of background to set the scene : we've told a client he can provide us with images of any type and we'll put them on his reports. I've just had a quick run through of doing this and found that the reports (and other things between me and them) are all designed to only use SVGs.
I thought I'd struck gold when I found online that you can convert an image from a jpg or PNG into an SVG using free tools but alas I've not yet succeeded in getting an SVG stored as bytes in the DB in a format that allows me to use it again after reading it back out.
Here's a quick timeline of what followed leading up to my problem.
I use an online tool to generate an SVG from a PNG (e.g., MobileFish)
I can open and view it in Firefox and it looks ok
I ultimately need the SVG to be stored as bytes in the DB, from where the report will pull it via a webpage that serves it up as SVG. So I write it as bytes into a SQL data script. The code I use to write these bytes is included below.
I visit said webpage and I get an error that there is an "XML parsing error on Line 1 Column 1" and it shows some of my bytes. They begin "3C73"
I revisit the DB and compare the bytes I've just written there with some pre-existing (and working ones). While my new ones begin "3C73", the others begin "0xFFFE".
I think I've probably just pointed out something really fundamental but it hasn't clicked.
Can someone tell me what I've done that means my bytes aren't stored in the correct encoding/format?
When I open my new SVG in Notepad++ I can see the content includes the following which could be relevant :
<image width="900" height="401" xLink:href="data:image/png;base64,
(base 64 encoded data follows for 600+ lines)
Here's the brains of the code that turns my SVG into the bytes to be stored in DB :
var bytes = File.ReadAllBytes(file);
using (var fs = new StreamWriter(file + ".txt"))
{
foreach (var item in bytes)
{
fs.Write(String.Format("{0:X2}",item));
}
}
Any help appreciated.
Cheers
Two things:
SVGs are vector images, not bitmap files. All that online tool is doing is taking a JPEG and creating a SVG file with a JPEG embedded in it. You aren't really getting the benefit of a true SVG image. If you realise and understand that, then no worries.
SVG files are just text. In theory there is no reason you can't just store them as strings in your db. As long as the column is big enough. However normally if you are storing unstructured files in a db, the preferred column type to use is a "Blob".
http://technet.microsoft.com/en-us/library/bb895234.aspx
Converting your SVG file to hex is just making things slower and doubling the size of your files. Also when you convert back, you have to be very careful about the string encoding you are using. Which, in fact, sounds like the problem you are having.
I am suspecting you are doing it incorrectly. SVG is simply and XML based vector image format. I guess your application might be using SVG image element and you need to convert your png image to base64 encoded string .
am using htmlagilitypack to parse the html and get the src value of the images. I made my workaround for attachments and works fine. Fileattachment.content made the job. But i dont know how to work with an image in the html that makes reference to another site, i mean its not an attachment of the email. I get the src value of the images in the html have no problem with that, htmlagilitypack is a great api. But how do i after getting the src value of the external image, get that image and store it in a byte of arrays for saying an example. I have no intentions of storing this images in disk.
Since you have the image URL, you can make a WebRequest to that URL, and you will receive back the image in the form of a response stream;
You can store the content of the response stream in a byte[] array and save that to your database. You may want to store some additional data such as the type of the image in another column, particularly if you will be displaying the images later from your database.
Does this help?
QUESTION: Anyone have some code they could post that will download a file from a URL/Link that will automatically handle:
(a) binary or text based
(b) gzip encoded
BACKGROUND: I've been starting to do this but hitting hurdles. Like I was using WebClient however it seems it can't handle the gzip bit (need to drop back to HTTPWebRequest). Also I'm getting a little confused re how to tell if the link/URL (e.g. taken from a HTML page) is really Text or Binary. Is there a well list of all content types that would be TEXT, or the ones that would be BINARY?
Thanks
You can check for ContentType header in the Response's headers, primarily all text types begin with "text/*" like "text/html", "text/xml" etc etc, however here is a list of content types that can be useful. "application/javascript" etc are also text based but they are in different category.
Content Types
Does the answer to this question Does .NET's HttpWebResponse uncompress automatically GZiped and Deflated responses? give you what you want?
I have researched on spidering and think that it is a little too complex for quite a simple app I am trying to make. Some data on a web page is not available to view in the source as it is just being displayed by the browser.
If I wanted to get a value from a specific web page that I was to display in a WebBrowser control, is there any method to read values off of the contents of this browser?
If not, does anyone have any suggestions on how they might approach this?
You’re not looking for spidering, you’re looking for screen scraping.
I'd have to agree with Bombe, it sounds more like you want HTML Screen Scraping. It requires lots of parsing, and if the page your scraping ever changes, your app will break, however here's a small example of how to do it:
WebClient webClient = new WebClient();
const string strUrl = "http://www.yahoo.com/";
byte[] reqHTML;
reqHTML = webClient.DownloadData(strUrl);
UTF8Encoding objUTF8 = new UTF8Encoding();
string html = objUTF8.GetString(reqHTML);
Now the html variable has the entire HTML in it, and you can start parsing away.
Because the browser simply renders the underlying content, the most flexible approach would be to parse the underlying content (html/css/js/whatever) yourself.
I would create a parsing engine that looks for the things your spider application needs.
This could be a basic string searching algorithm which looks for href="" for example and reads the values in order to produce new requests and continue spidering. Your engine could be written to only look for things it is interested in and extended in that way for more functionality.