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?
Related
I am writing a web API to return an object with a byte array property, something like this in the controller:
...
car.name=Cruze;
car.Image=[123,145,10,...] // image data as byte[]
return Ok(car);
On the UI, I can see the returned car object, but the car.Image property is converted to Base64String.
I am not sure why this happens. How can I make sure the car.Image is sent as byte[] to client?
Thanks for any help!
Web API communication happens over HTTP. HTTP does not know anything about byte[]. Because your byte[] is part of C# and HTTP does not know anything about C# either.
So it is correctly serialised as Base64String (this is the best thing to do, really) and your client needs to decode Base64 into byte array for further processing.
All communication between your server and the client must be serialized. So your byte array will be serialized among everything else. The standard serialization used in this case is the Base64String.
Actually if you want to use your image on the website, then the Base64String has just made it easier for you. All you need is to add data:image/jpeg;base64, at the beginning of the string and use it wherever you usually use the image URL. Change jpeg to the type of your image. Examples:
HTML:
<img src="data:image/jpeg;base64,..." />
JavaScript:
img.src = "data:image/jpeg;base64,...";
CSS:
URL("data:image/jpeg;base64,...")
You can also load it to a canvas if you like to edit the image using the HTML5 capabilities.
If you're using a client other than the browser, there is increasing number of libraries to convert between Base64String and images in any programming framework, so just look for one for your framework.
If you want to use the byte array for something else, you can easily decode the Base64String back to a byte array.
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 .
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!
I'm prototyping a video streaming client for the iphone that gets it's content from a webserver written in C#.
The server outputs an XML document where the jpg data for the image is stored in one of the tags (). It writes it out using WriteBase64.
On the iPhone, I'm using libxml to parse the xml and storing the bytes for the image in an NSString.
The next step is to create an NSData object using the data and then a new UIImage using it's +initWithData method.
However, each time I try to create a new image, the result is a nil object indicating failure. My best guess is that there is something I need to do to convert the NSString back somehow.
Please help!!
Are you properly base64 decoding your the string from your XML? There is not a native way to do this in Objective-C that I am aware of, but there is a good discussion on how to roll your own here: http://www.cocoadev.com/index.pl?BaseSixtyFour
An alternate approach would be to attach the image binary data directly after the XML stream and parse it out yourself - base64 encoding really expands the size of the image you are transferring.