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?
Related
I have a base64 encoding of a PNG image (the string starts with data:image/png;base64,). My understanding is that this a base64 representation of the image encoded in PNG. Is there a way to get the "raw" pixel by pixel binary of the image using Node.js?
Try this. First remove "data:image/png;base64," from the string. i.e
const img = base64Data.replace(/^data:image\/png;base64,/, "");
Then convert the image from base64.
const imgBuf = Buffer.from(img, 'base64');
At this point we have the image in binary. We can then get the pixels. Try with this module https://github.com/scijs/get-pixels.
const getPixels = require("get-pixels");
getPixels(imgBuf, "image/png", function(err, pixels) {
if (err) {
console.log("Bad image path")
return
}
console.log("got pixels")
});
I think you can acheive that by doing so:
var b64str;
var buf = new Buffer(b64str, 'base64');
As Buffer objects are used to represent a fixed-length sequence of bytes
I am getting a base64 string but I need to convert it into normal png/jpeg image and view in console after storing in a variable,I want to use it for exporting svg to png in ppt with pptxgenjs plugin.Here is the code below
https://plnkr.co/edit/s9bhKu5rTOBrKziUb6lg?p=preview
html
<div>How to convert base64 into normal png</div>
javascript
var base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABUYAAAGQCAYAAABiabpAAAAgAElEQVR4Xu3dC2xc930v+L9EUqLeFB3HZpuHZSXbVs5mG9nF9ubVeuO2Qa+UYlEY2AKRg+5C9k1uImebFEKANNgm6c16twViJU1ha7GA4+y9aF0EN7bQpnms2yZpU8RS+nCdbhNZrZNGbhNTL0ukRFLa8z8zhxxSc2aGnBnynDOfAxCkyJkz//P5ndHjq9///193LTmCgwABAgQIECBAgAABAgQIECBAgAABAgMksE4wOkDVdqkECBAgQIAAAQIECBAgQIAAAQIECKQCglE3AgECBAgQIECAAAECBAgQIECAAAECAycgGB24krtgAgQIECBAgAABAgQIECBAgAABAgQEo+4BAgQIECBAgAABAgQIECBAgAABAgQGTkAwOnAld8EECBAgQIAAAQIECBAgQIAAAQIECAhG3QMECBAgQIAAAQIECBAgQIAAAQIECAycgGB04EruggkQIECAAAECBAgQIECAAAECBAgQEIy6BwgQIECAAAECBAgQIECAAAECBAgQGDgBwejAldwFEyBAgAABAgQIECBAgAABAgQIECAgGHUPECBAgAABAgQIrFjgxIkT4d577w3veMc7wnve854Vn8cTCRAgQIAAAQIECKy2gGB0tcW9HgECBAgQIECgBAJnz54N733ve8PTTz+9aLRLA9CiBaPT09Phox/9aPj85z+fjvs1r3lN+PjHPx7GxsZKoG6IBAgQIECAAAECqykgGF1Nba9FgAABAgQIECiBwCc+8YnwyCOPNO0Cffzxx8NnP/vZ+bBxLYLROL4vfOEL4ciRI2HXrl1NRbNgN/5QMFqCm84QCRAgQIAAAQJrICAYXQN0L0mAAAECBAgQKKpADD4//OEPhw996EPhbW97W9thCkbbEnkAAQIECBAgQIBAQQUEowUtjGERIECAAAECBFZbIOuyfNnLXhY++MEPhtHR0bZDaAxGDx48uGgae7Nw9dSpU+HQoUPh9OnT6bknJiau6/xsPOe+ffvSx99www3hgQceCLFbNJsmnw2u2evoGG1bOg8gQIAAAQIECAy8gGB04G8BAAQIECBAgACBmkAWSHbaLdr4nLe+9a3hwoUL6bqkcXp7Nh3/4YcfDnv37p0/f5yGn4WueeFlNo54zptuuinEwLUxpDWV3h1LgAABAgQIECDQCwHBaC8UnYMAAQIECBAgUAGBbBp9Y5jZ7rKyEHNp52enIWuzkDN7bt7GSYLRdlXxcwIECBAgQIAAgU4EBKOdKHkMAQIECBAgQGAABLoJRvN2q2/XfdoqGF16zqwEgtEBuBldIgECBAgQIEBgFQQEo6uA7CUIECBAgAABAmUQWI1gdOkao9Elr9tUMFqGu8YYCRAgQIAAAQLlFRCMlrd2Rk6AAAECBAgQ6KlAp9PfG180b1f6ZufKgte4dmi2zqiO0Z6W0MkIECBAgAABAgSWISAYXQaWhxIgQIAAAQIEqizQ7a7073nPe+Z5lgajeRstCUarfEe5NgIECBAgQIBAsQUEo8Wuj9ERIECAAAECBFZVIOvqbLc2aDaoTjtG80JXweiqlteLESBAgAABAgQINAgIRt0OBAgQIECAAAECiwRiWPnII4+Exinv2QPiGqEf//jHw2/+5m+GsbGx0GkwOj09HT760Y+Gv/mbvwlHjhwJu3btmn9uPPfDDz8c9u7dm75M3jnbhbGNF5HXoarUBAgQIECAAAECBDIBwah7gQABAgQIECBA4DqBZpskxQctDUs7DUbjc7Ow8umnn05fL26udODAgfDe9743xO9lXartgtH43Cy8jV83624VjLqpCRAgQIAAAQIE2gkIRtsJ+TkBAgQIECBAgAABAgQIECBAgAABApUTEIxWrqQuiAABAgQIECBAgAABAgQIECBAgACBdgKC0XZCfk6AAAECBAgQIECAAAECBAgQIECAQOUEBKOVK6kLIkCAAAECBAgQIECAAAECBAgQIECgnYBgtJ2QnxMgQIAAAQIECBAgQIAAAQIECBAgUDkBwWjlSuqCCBAgQIAAAQIECBAgQIAAAQIECBBoJyAYbSfk5wQIECBAgAABAgQIECBAgAABAgQIVE5AMFq5krogAgQIECBAgAABAgQIECBAgAABAgTaCQhG2wn5OQECBAgQIECAAAECBAgQIECAAAEClRMQjFaupC6IAAECBAgQIECAAAECBAgQIECAAIF2AoLRdkJ+ToAAAQIECBAgQIAAAQIECBAgQIBA5QQEo5UrqQsiQIAAAQIECBAgQIAAAQIECBAgQKCdgGC0nZCfEyBAgAABAgQIECBAgAABAgQIECBQOQHBaOVK6oIIECBAgAABAgQIECBAgAABAgQIEGgnIBhtJ+TnBAgQIECAAAECBAgQIECAAAECBAhUTkAwWrmSuiACBAgQIECAAAECBAgQIECAAAECBNoJCEbbCfk5AQIECBAgQIAAAQIECBAgQIAAAQKVExCMVq6kLogAAQIECBAgQIAAAQIECBAgQIAAgXYCgtF2Qn5OgAABAgQIECBAgAABAgQIECBAgEDlBASjlSupCyJAgAABAgQIECBAgAABAgQIECBAoJ2AYLSdkJ8TIECAAAECBAgQIECAAAECBAgQIFA5AcFo5UrqgggQIECAAAECBAgQIECAAAECBAgQaCcgGG0n5OcECBAgQIAAAQIECBAgQIAAAQIECFROQDBauZK6IAIECBAgQIAAAQIECBAgQIAAAQIE2gkIRtsJ+TkBAgQIECBAgAABAgQIECBAgAABApUTKHQwevTo0fDUU0+l6Pv37w/79u1rWoBjx46FJ554Yv5nrR5buQq6IAIECBAgQIAAAQIECBAgQIAAAQIEli1Q2GD0xIkT6cXs3bs3nDp1Knz6058O999/fxgbG7vuImMwGo+84HTZKp5AgAABAgQIECBAgAABAgQIECBAgEClBQobjDaqx5D0+PHj4eDBg02LIRit9D3q4ggQIECAAAECBAgQIECAAAECBAj0XKDQwWg2lX737t3h0KFDYXR0NDcYzabS92oa/enTp3uO7YQECBAgQIAAAQIECBAgQIAAAQIECPRXYGJioqMXKHQwml1B7Bh97LHHwuHDh5tOpc8eNz09HY4cORL27NljWn1H5fcgAgQIECBAgAABAgQIECBAgAABAoMpUIpgNAaesXs0riG6a9eulpWK0+pjt2fetPvBLLOrJkCAAAECBAgQIECAAAECBAgQIECgUaCwwei3vvWtdOp8DEJjx2i2+VKrYFTHqJubAAECBAgQIECAAAECBAgQIECAAIFOBAobjGYh58mTJ9PruO+++9Id6uMRu0KfeeaZ+XVHs7VI48/uuOMO3aKdVN5jCBAgQIAAAQIECBAgQIAAAQIECAywQGGD0QGuiUsnQIAAAQIECBAgQIAAAQIECBAgQKDPAoLRPgM7PQECBAgQIECAAAECBAgQIECAAAECxRMQjBavJkZEgAABAgQIECBAgAABAgQIECBAgECfBQSjfQZ2egIECBAgQIAAAQIECBAgQIAAAQIEiicgGC1eTYyIAAECBAgQIECAAAECBAgQIECAAIE+CwhG+wzs9AQIECBAgAABAgQIECBAgAABAgQIFE9AMFq8mhgRAQIECBAgQIAAAQIECBAgQIAAAQJ9FhCM9hnY6QkQIECAAAECBAgQIECAAAECBAgQKJ6AYLR4NTEiAgQIECBAgAABAgQIECBAgAABAgT6LCAY7TOw0xMgQIAAAQIECBAgQIAAAQIECBAgUDwBwWjxamJEBAgQIECAAAECBAgQIECAAAECBAj0WUAw2mdgpydAgAABAgQIECBAgAABAgQIECBAoHgCgtHi1cSICBAgQIAAAQIECBAgQIAAAQIECBDos4BgtM/ATk+AAAECBAgQIECAAAECBAgQIECAQPEEBKPFq4kRESBAgAABAgQIECBAgAABAgQIECDQZwHBaJ+BnZ4AAQIECBAgQIAAAQIECBAgQIAAgeIJCEaLVxMjIkCAAAECBAgQIECAAAECBAgQIECgzwKC0T4...';
console.log(base64String);
var textImage = 'textImage.png'
console.log(textImage);
HTML
<img id="img_ele"></img>
JavaScript
string baseStr64="data:image/png;base64,iVBORw0K......";
const img_ele = document.getElementById('img_ele');
img_ele.setAttribute('src', baseStr64);
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);
}
I want to generate a file containing strings alongside Float32Arrays in my web app. I can write this data into a blob and then a file like this:
var myFirstFloat32Array = new Float32Array([42, 1, 2, 3]);
var myString = 'This is my string. It is a beautiful string.';
var blob = new Blob([
new Uint8Array([myFloat32Array.length]), // Store the size.
myFloat32Array,
new Uint8Array([myString.length]), // Store the size.
myString);
var downloadLink = document.createElement('a');
downloadLink.href = window.URL.createObjectURL(blob);
downloadLink.download = 'generatedFile';
downloadLink.innerHTML = 'Click to download generated file.';
So ... that successfully writes the file, but how do I read the string following the float 32 array?
I can read the first float32 array easily by reading the number from the first 4 bytes (which gives me the size of the array) and then constructing a Float32Array of that length.
However, how do I read the string? The string could contain characters outside of the ASCII range, so I can't just btoa the string, convert to a Uint8Array, and then write it.
Maybe I could convert the string to a blob first, get its size from the blob, and then somehow decode it later while reading (but how do I know the character encoding used later)?
What's the standard way to store string data alongside byte data in javascript for later decoding?
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.