Monday, September 25, 2017 : Convert base 64 string into image

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

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.

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>

<html xmlns="">
<head runat="server">
    <title>digital signature</title>
 <link rel="stylesheet" href="css/signature-pad.css" />
    <form id="form1" runat="server" style="width:100%;height:100%">
        <asp:HiddenField ID="hfimg" runat="server" />
       <div id="signature-pad" class="signature-pad">
    <div class="signature-pad--body">
    <div class="signature-pad--footer">
      <div class="description">Sign above</div>

      <div class="signature-pad--actions">
          <button type="button" class="button clear" data-action="clear">Clear</button>
           <asp:Button ID="Button1" runat="server" Text="Save signature" data-action="save" OnClick="Button1_Click" />           

  <script src="js/signature_pad.js"></script>
  <script src="js/app.js"></script>

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.

// On mobile devices it might make more sense to listen to orientation change,
// rather than window resize events.
window.onresize = resizeCanvas;

function download(dataURL, filename) {
    var blob = dataURLToBlob(dataURL);
    var url = window.URL.createObjectURL(blob);

    var a = document.createElement("a"); = "display: none";
    a.href = url; = filename;



// 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
    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) {

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; 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);
    } 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

No comments:

Post a Comment