JAVASCRIPT - SAVE CANVAS IMAGE TO DATAURL
This code binds the base64 string to a hiddenfield on click.
save.addEventListener('click', function (event) {
var dataUrl = canvas.toDataURL();
$('txtbx').val(dataUrl);
});
VB.NET - SUBMIT BASE64 STRING TO SQL
This code submits the base64 string to the database on click. (As VarChar)
Protected Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btn.Click
Dim base64 As String = hidUrl.Value
Dim base64Decode As String = base64.Replace("data:image/png;base64,", "")
Dim cmd As New SqlCommand("sp", con)
cmd.CommandType = CommandType.StoredProcedure
Dim image As New SqlParameter("#image", SqlDbType.VarChar, -1)
image .Direction = ParameterDirection.Input
cmd.Parameters.Add(image).Value = base64Decode
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Sub
QUESTION
How to either:
Save canvas image as varbinary string?
convert base64 string to varbinary?
Any alternative solutions to get the image string to a varbinary field is welcome.
I have read a lot of documentation on this but have been unable to implement a working example. I now need some expert guidance on the matter.
SIMPLE SOLUTIONS
The answer was simple wrap the string as follows:
Convert.FromBase64String(base64Decode)
To convert the base64 string to a binary data type, use Convert.FromBase64String, then with the byte array you can store it as binary in your database.
I did this quick test in a form and it worked fine:
//got this datauri from http://corehtml5canvas.com/code-live/ch01/example-1.1/example.html
var datauri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAEsCAYAAAAfPc2WAAAaqklEQVR4Xu3dS6LrNBYFUN4UqqZIj/HQY4owBapCKpWfbOvI2365V4sWcJ1jafkk2rET58cv/iFAgAABAgQIEIgK/IhWU4wAAQIECBAgQOAXAUsTECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIECBAgAABAgKWHiBAgAABAgQIhAUErDCocgQIECBAgAABAUsPECBAgAABAgTCAgJWGFQ5AgQIECBAgICApQcIECBAgAABAmEBASsMqhwBAgQIECBAQMDSAwQIECBAgACBsICAFQZVjgABAgQIECAgYOkBAgQIECBAgEBYQMAKgypHgAABAgQIEBCw9AABAgQIECBAICwgYIVBlSNAgAABAgQICFh6gAABAgQIECAQFhCwwqDKESBAgAABAgQELD1AgAABAgQIEAgLCFhhUOUIEMgI/Pr7n3+vVfrjt397/cpQq0KAwAECXqAOQFWyJfB3Y7H8Eeq/Vu3LGFL19x7R6viOtNo7l2MffwlV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CBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwuIGDN3gHmT4AAAQIECMQFBKw4qYIECBAgQIDA7AIC1uwdYP4ECBAgQIBAXEDAipMqSIAAAQIECMwu8B+03ZHSzNSl5QAAAABJRU5ErkJggg==";
var base64 = datauri.Substring(datauri.IndexOf(',') + 1);
var binary = Convert.FromBase64String(base64);
pictureBox1.Image = Image.FromStream(new MemoryStream(binary));
Remember to change SP parameter to work with varbinary.
Your decode function is overcomplicated you don't need that, just change your parameter creation:
Dim image As New SqlParameter("#image", SqlDbType.VarBinary, -1)
image .Direction = ParameterDirection.Input
cmd.Parameters.Add(image ).Value = Convert.FromBase64String(base64.Substring(base64.IndexOf(',') + 1););
You don't need any char arrays or stream, just remove the useless parts of the URI (substring piece, and convert it to a byte array (Convert...).
ADO.NET will automaticaly convert the byte array to the varbinary expected by MSSQL.
Perhaps you need to update your table column [Image] to varbinary(max) first.
Then, update the procedure as below:
#image VARCHAR(MAX)
AS
BEGIN
SET NOCOUNT ON;
UPDATE [tbl]
SET [Image] = cast('' as xml).value('xs:base64Binary(sql:variable("#image"))', 'varbinary(max)')
END
Try that and let us know if it works.
EDIT:
Looks like you do need to decode the data. I've updated the proc. Have a look at http://blog.falafel.com/t-sql-easy-base64-encoding-and-decoding/ for further info on encoding/decoding.
Related
I have stored jpeg image in mysql database in format longblob...now i read that longblob and would like to retrieve jpeg image to see how it looks..i get only base64 string so how to convert it in mysql or node js?
Here is my base64 string that is read from database:
https:// jsfiddle.net/ ej4c9pk3/
How to decode it to jpeg image so that i can see how it looks and then i can display it on web page.
Image base64 text is on the link...so you could see it and try it to decode to jpeg.
I write function that convert Base64 String to Base64 Hex String and now it is correct converted to display as BLOB png image...but problem is when i open field in DB Browser for SQLite it writes this converted value as Text, and must be written as binary (so that the image will be recognized and displayed when i choose Image in DB Browser for SQLIte...so the question is how can i insert Base64 Hex String to SQLite3 Database as binary?
Here is my code for insert:
/* GET - channels_logo */
for (var i in rows) {
/* WRITE - table channels_logo */
db.prepare('INSERT INTO channels_logo (logo_id, logo_channel, logo_png) VALUES
("'+rows[i].id+'", "'+rows[i].channel+'", "'+(base64toHex(new Buffer(rows[i].logo).toString()))+'")').run();
};
function base64toHex(base64) {
/* DEFINE - variables */
var raw = atob(base64);
var HEX = '';
for (i = 0; i < raw.length; i++) {
var _hex = raw.charCodeAt(i).toString(16)
HEX += (_hex.length==2?_hex:'0'+_hex);
};
return HEX.toUpperCase();
};
[![Using this insert code is inserted as Text:][1]][1]
https://i.stack.imgur.com/iZ2A1.jpg
[![And needs to be binary inserted and now it looks ok (i just erase text and copy text inserted into binary and now it works)][1]][1]
https://i.stack.imgur.com/ZzGTU.jpg
So i see that SQLite3 displays inserted Base64 Hex As Text not binary...what i need to write in insert statement to insert it as binary?
I'm using the following to convert an image to a base64 encoded string. On the client website in javascript:
var reader = new FileReader();
reader.onloadend = function () {
data64 = reader.result;
};
reader.readAsDataURL(myFile);
Now I pass this data to the server, which does the following:
var data = Convert.FromBase64String(data64);
However this results in a format exception:
The format of s is invalid. s contains a non-base-64 character, more than two padding characters, or a non-white space-character among the padding characters.
My input file is one of the sample images found on Windows 7 -> My Pictures/Sample Pictures/Tulips.jpeg
How can I attempt to debug what is causing the problem for such a large result output?
Okay, I have worked around this by using reader.readAsBinaryString instead and then converting this using btoa.
This seems to be accepted fine in Convert.FromBase64String
I experienced the same issue and founds out that my complete dataurl contained not only padding characters at the end, but also padding characters in the middle of the dataurl.
I used the following code to fix the base64string (but it still has a bug):
private static string getCleanedBase64String(string base64String)
{
string tempString = base64String.Replace("_", "/").Replace("-", "+").Replace("=", "");
return tempString + new string('=', (4 - tempString.Length % 4) % 4);
}
My javascript code sends blobs of data to a handler in C#. My Javascript code is working fine, and I have already tried to receive the data from client(javascript) and pass them to the C# handler and save them in a local Folder.
Instead of saving the data in a folder, I want to now save it in a string.
My handler each time gets a piece of my information as a byte[].
my Javascript:
xhr = new XMLHttpRequest();
// this is not the complete code
// I slice my file and push them in var blobs = [];
blobs.push(file.slice(start, end));
while (blob = blobs.shift()) {
xhr.send(blob);
count++;
}
My C# handler: In here, the bool ok never gets set to true.
How can I get all my files chunk by chunk as I am sending them from javascript; and, instead of saving in a folder, saving it in a string?
public void ProcessRequest(HttpContext context)
{
try
{
byte[] buffer = new byte[context.Request.ContentLength];
context.Request.InputStream.Read(buffer, 0, context.Request.ContentLength);
string fileSize = context.Request.Headers.Get("X_FILE_SIZE");
bool ok = false;
System.Text.StringBuilder myData = new System.Text.StringBuilder();
myData.Append(buffer);
if(myData.Length == int.Parse(fileSize)){ ok=true; }
}
catch (Exception)
{
throw;
}
}
There is no overload of StringBuilder.Append that takes a byte array, so it will call the StringBuilder.Append(object) method. That will call ToString on the byte array to get a string value, which results in the string "System.Byte[]".
To get the byte array as a string, you need to know what the bytes represent. For example, if the bytes are text that is encoded as UTF-8 then you can use the Encoding.UTF8 class to decode it:
myData.Append(Encoding.UTF8.GetString(buffer));
Note that multi-byte encodings like UTF-8 may represent one character as multiple bytes, so the string length may be different from the byte array length.
Basically, I want to make a game in JavaScript and allow a user to get a copy paste-able code which stores their data. In reality, this "code" is actually obfuscated JSON that can be decoded by the application later.
I don't need much security, as I am aware that if people put some effort in they can view/modify the save, and I have no interest in stopping them. I just want the average user to not be tempted and/or see unnecessary information.
Thanks in advance.
you can use base64 encoding to encode your json String. it would be faster approach.
If you with pure javascript :
var encodedData = btoa("stringToEncode");
If you are using nodejs:
base-64 encoding:
var encodedStr = new Buffer("Hello World").toString('base64')
decode to original value:
var originalString = new Buffer("SGVsbG8gV29ybGQ=", 'base64').toString('utf-8')
Well... given that there is no security concern and you only want users to see what appears to be garbled data you can "encode" all the json data
var jsonData = {"key":"value"};
// turn it into a string
var jsonString = JSON.stringify(jsonData);
// replace some letters
var awkardString = jsonString.replace(/a/g, '!Ax6'); // be carefull, you should replace a letter with a pattern that does not already exist on the string.
// encode it with some type of reversible encoding
var garbledData = encodeURI(jsonString);
// output is: %7B%22key%22:%22v!Ax6lue%22%7D
// to "decode" it do the same steps in reverse
awkardString = decodeURI(garbledData);
jsonString = awkardString.replace(/!Ax6/g, 'a'); // now you see, if '!Ax6' existed on the source string, you would loose it and get an 'a' in return. That is why the replacement should be as unique as possible
jsonData = JSON.parse(jsonString);
I am trying to emulate the following .NET code in javascript using the Crypto.js library.
var hashInput = "public=ID1000000001::routetype=POST::route=personsearch::key1=ID1000000001::key2=1043"
byte[] inputBytes = new byte[hashInput.Length * sizeof(char)];
System.Buffer.BlockCopy(hashInput.ToCharArray(), 0, inputBytes,0,inputBytes.Length);
byte[] keyBytes = HexadecimalStringToByteArray("A_HEX_STRING_GOES_HERE");
var hmac = HMACSHA256.Create();
hmac.Key = keyBytes;
var clientHash = hmac.ComputeHash(inputBytes);
This gives me a ByteArray which is used as part of POST to a WebAPI in the form of
[41,197,254,91,244,87.....] etc.
I want to make the same exact byte array in a javascript client but i am having diffculty getting this. I have tried the following:
var stringToHash = 'public=ID1000000001::routetype=POST::route=personsearch::key1=ID1000000001::key2=1043';
var privateKey = 'A_HEX_STRING_GOES_HERE';
var hash = CryptoJS.HmacSHA256(stringToHash, privateKey);
//this results in a WordArray, which can be converted to many types
//however i cannot get the byte array as in the .net example
//i.e. i just want to get [41,197,254,91,244,87....] etc.
I can see on the documentation for Crypto.js how to convert to base64, and other formats, but not to the ByteArray which i need.
Any ideas?
--UPDATE
Thanks for the advice on not using BlockCopy, and also for pointing me in the direction of the encoding issues which i had completely neglected.
This was part of the issue. The other part was that i had managed to misuse the HMACSHA256 class. I found (after several, several hours) that the .NET code was not producing the correct hash value.
It turns out this code DID produce the correct Hash:
var hashInput = "a::string::to::hash";
var privateKey = "C0B615950F9D577A4EAF64C9B4F2E50F3DA2C6BB6F790FA346E9732788B29A08AC5444F1B82984DB190A75D3861CC4802D598EBF0025FD1C327928F43EB1C80E";
byte[] inputBytes = Encoding.UTF8.GetBytes(hashInput);
byte[] keyBytes = Encoding.UTF8.GetBytes(privateKey);
HMACSHA256 hmac = new HMACSHA256(keyBytes);
hmac.Initialize();
var clientHash = hmac.ComputeHash(inputBytes);
var base64 = Convert.ToBase64String(clientHash);
Lucky for me my WebAPI is not live yet!
The problem is probably the character encoding. You should use for instance the method encode_utf8(stringValue) in JavaScript and new UTF8Encoding.getBytes(String value) in .NET, to make sure that the character encodings match. Note that modern cryptography is based on bytes, not on strings or characters. Using System.Buffer.BlockCopy() to encode characters is really bad practice.