I would like to insert clipboard image in canvas element into sql database using c# having trouble inserting into sql database.
My requirement is to paste clipboard image into a display control and then insert this image on button click into database. I've spent days finding the solution and I got a code online. It uses JavaScript to store clipboard image and pastes it in canvas element. I want this image to be inserted on button click to Sql Database. I've no clue how to do this.
<canvas style="border:1px solid grey;" id="mycanvas">
</canvas>
<script type="text/javascript">
function retrieveImageFromClipboardAsBlob(pasteEvent, callback) {
if (pasteEvent.clipboardData == false) {
if (typeof (callback) == "function") {
callback(undefined);
}
};
var items = pasteEvent.clipboardData.items;
if (items == undefined) {
if (typeof (callback) == "function") {
callback(undefined);
}
};
for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") == -1) continue;
var blob = items[i].getAsFile();
if (typeof (callback) == "function") {
callback(blob);
}
}
}
window.addEventListener("paste", function (e) {
retrieveImageFromClipboardAsBlob(e, function (imageBlob) {
if (imageBlob) {
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(img, 0, 0);
};
var URLObj = window.URL || window.webkitURL;
img.src = URLObj.createObjectURL(imageBlob);
}
});
}, false);
</script>