Asp.net : Convert base 64 string into image

In this article I am going to explain how to convert or save Base64 string as image in asp.net.

Description:

Recently I have got a requirement to implement digital signature functionality in application. To fulfill this requirement I have use Signature pad jquery. It is HTML5 canvas based. The signature file is created in base64 string. I want to save this base64 string as image in application.

Implementation:

You can download Signature pad script from here. Download Javascript and add reference to web form.

HTML Markup of webform

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Signature.aspx.cs" Inherits="Signature" %>

<!DOCTYPE html>

<title>digital signature</title>

</head>

<body>

<asp:HiddenField ID="hfimg" runat="server" />

</div>

<div class="description">Sign above</div>

<div>

<button type="button" class="button clear" data-action="clear">Clear</button>

</div>

<div>

<asp:Button ID="Button1" runat="server" Text="Save signature" data-action="save" OnClick="Button1_Click" />

</div>

</form>

</body>

</html>

You need to make some changes in app.js file.

Code of App.js file after changes

var wrapper = document.getElementById("signature-pad");

var clearButton = wrapper.querySelector("[data-action=clear]");

var savePNGButton = wrapper.querySelector("[data-action=save-png]");

var saveSVGButton = wrapper.querySelector("[data-action=save-svg]");

var canvas = wrapper.querySelector("canvas");

var signaturePad = new SignaturePad(canvas);

var saveButton = wrapper.querySelector("[data-action=save]");

// Adjust canvas coordinate space taking into account pixel ratio,

// to make it look crisp on mobile devices.

// This also causes canvas to be cleared.

function resizeCanvas() {

// When zoomed out to less than 100%, for some very strange reason,

// some browsers report devicePixelRatio as less than 1

// and only part of the canvas is cleared then.

var ratio = Math.max(window.devicePixelRatio || 1, 1);

// This part causes the canvas to be cleared

canvas.width = canvas.offsetWidth * ratio;

canvas.height = canvas.offsetHeight * ratio;

canvas.getContext("2d").scale(ratio, ratio);

// This library does not listen for canvas changes, so after the canvas is automatically

// cleared by the browser, SignaturePad#isEmpty might still return false, even though the

// canvas looks empty, because the internal data of this library wasn't cleared. To make sure

// that the state of this library is consistent with visual state of the canvas, you

// have to clear it manually.

signaturePad.clear();

}

// On mobile devices it might make more sense to listen to orientation change,

// rather than window resize events.

window.onresize = resizeCanvas;

resizeCanvas();

function download(dataURL, filename) {

var blob = dataURLToBlob(dataURL);

var url = window.URL.createObjectURL(blob);

var a = document.createElement("a");

a.style = "display: none";

a.href = url;

a.download = filename;

document.body.appendChild(a);

a.click();

window.URL.revokeObjectURL(url);

}

// One could simply use Canvas#toBlob method instead, but it's just to show

// that it can be done using result of SignaturePad#toDataURL.

function dataURLToBlob(dataURL) {

// Code taken from https://github.com/ebidel/filer.js

var parts = dataURL.split(';base64,');

var contentType = parts[0].split(":")[1];

var raw = window.atob(parts[1]);

var rawLength = raw.length;

var uInt8Array = new Uint8Array(rawLength);

for (var i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], { type: contentType });

}

clearButton.addEventListener("click", function (event) {

signaturePad.clear();

});

saveButton.addEventListener("click", function (event) {

if (signaturePad.isEmpty()) {

alert("Please provide signature first.");

} else {

document.getElementById("hfimg").value = signaturePad.toDataURL();

}

});

Add namespace

C# Code

using System.Drawing.Imaging;

using System.IO;

VB.net Code

Imports System.Drawing.Imaging

Imports System.IO

Convert Base64 string to image file

On button click write the below given code to convert the string to image. After conversion in image file, save it to Screenshot folder in application.

C# Code

protected void Button1_Click(object sender, EventArgs e)

{

string signature = hfimg.Value;

string concat = signature.Replace("data:image/png;base64,", "");

byte[] imageBytes = Convert.FromBase64String(concat);

MemoryStream ms = new MemoryStream(imageBytes, 0,imageBytes.Length);

// Convert byte[] to Image

ms.Write(imageBytes, 0, imageBytes.Length);

System.Drawing.Image image = System.Drawing.Image.FromStream(ms, true);

//save image

image.Save(Server.MapPath("~/ScreenShot/"+Guid.NewGuid()+".png"), ImageFormat.Png);

}

VB.net Code

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

Dim signature As String = hfimg.Value

Dim concat As String = signature.Replace("data:image/png;base64,", "")

Dim imageBytes As Byte() = Convert.FromBase64String(concat)

Dim ms As New MemoryStream(imageBytes, 0, imageBytes.Length)

' Convert byte[] to Image

ms.Write(imageBytes, 0, imageBytes.Length)

Dim image As System.Drawing.Image = System.Drawing.Image.FromStream(ms, True)

'save image

image.Save(Server.MapPath("~/ScreenShot/" + Guid.NewGuid.ToString() + ".png"), ImageFormat.Png)

End Sub

Monday, September 25, 2017

Asp.net : Convert base 64 string into image

No comments:

Post a Comment

Popular Posts

Labels