Inserting a base64 bitmap into rtf

I have an image which is captured from a signature capture. The sig cap returns a base64 string of the image.

I would like to create a rtf document string with this image inside it from javascript.

Here what I have:

var datapair = $sigdiv.jSignature("getData");

Which returns (shorten because to long to post on SO):

 ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNMAAAE2CAYAAABLINTeAAAgAElEQVR4Xu3dCbQtVXkgYPMYRVBAxTi0PkQDmCCgxiESeaBtCK0IGqKJEUzAuUFNtF1Jx/CcVnezYhSMtigYwJjYTgyRaFqNF+chYdBoVEQejgFRURNh4UD/v55qy/Lce88595w6tau+Wutf9wxVe//72/XOved/NfzCLSwECBAgQIAAAQIE2hO4W3S1edTdrvFzn4grI/599NqB8XOPWjor66R2SLy/LeI/phjCA2Ldjy5w/arpW43G+oE1+lptvONsLo92rp8ib6sSIECAAAECCxD4hQW0qUkCQIECBAgQIAAAQIECBBoWUAxrWVw3REgQIAAAQIECBAgQIAAAQIECJQroJhW7tzJnAABAgQIECBAgAABAgQIECBAoGUBxbSWwXVHgAABAgQIECBAgAABAgQIECBQroBiWrlzJ3MCBAgQIECAAAECBAgQIECAAIGWBRTTWgbXHQECBAgQIECAAAECBAgQIECAQLkCimnlzp3MCRAgQIAAAQIECBAgQIAAAQIEWhZQTGsZXHcECBAgQIAAAQIECBAgQIAAAQLlCiimlTt3MidAgAABAgQIECBAgAABAgQIEGhZQDGtZXDdESBAgAABAgQIECBAgAABAgQIlCugmFbu3MmcAAECBAgQIECAAAECBAgQIECgZQHFtJbBdUeAAAECBAgQIECAAAECBAgQIFCugGJauXMncwIECBAgQIAAAQIECBAgQIAAgZYFFNNaBtcdAQIECBAgQIAAAQIECBAgQIBAuQKKaeXOncwJECBAgAABAgQIECBAgAABAgRaFlBMaxlcdwQIECBAgAABAgQIECBAgAABAuUKKKaVO3cyJ0CAAAECBAgQIECAAAECBAgQaFlAMa1lcN0RIECAAAECBAgQIECAAAECBAiUK6CYVu7cyZwAAQIECBAgQIAAAQIECBAgQKBlAcW0lsF1R4AAAQIECBAgQIAAAQIECBAgUK6AYlq5cydzAgQIECBAgAABAgQIECBAgACBlgX+H9F/EpGfbmFGAAAAAElFTkSuQmCC"]

I then am trying to form a rtf doc with the following string.

string rtf = @"{\rtf1\ansi{\fonttbl\f0\fswiss Helvetica;}\f0\pard ";
            rtf += picture;
            rtf += " }";
            return rtf;

Where picture is(shorten because to long to post on SO):

var imageData = "iVBORw0KGgoAAAANSUhEUgAABNMAAAE2CAYAAABLINTeAAAgAElEQVR4Xu3dC9A1ZX0YcMOHYlEI0GhMk9EPiLU6NULEptUqL0irphb5IB0ZIxeVljEtl6ixM5kAH5dMR8dLwMY28cIltdgIcnHUdtTwUmsTdUCZxNRqlA9jvTSZfp/FCyKX/v961i7Led93z3nP2bPP7u/M/OfsOWd3n//ze5b3fOfPs7s/8QgPAgQIECBAgAABAgQIECBAgAABAgRaCfxEq7WsRIAAAQIECBAgQIAAAQIECBAgQIDAIxTTHAQECBAgQIAAAQIECBAgQIAAAQIEWgooprWEshoBAgQIECBAgAABAgQIECBAgAABxTTHAAECBAgQIECAAAECBAgQIECAAIGWAoppLaGsRoAAAQIECBAgQIAAAQIECBAgQEAxzTFAgAABAgQIECBAgAABAgQIECBAoKWAYlpLKKsRIECAAAECBAgQIECAAAECBAgQUExzDBAgQIAAAQIECBAgQIAAAQIECBBoKaCY1hLKagQIECBAgAABAgQIECBAgAABAgQU0xwDBAgQIECAAAECBAgQIECAAAECBFoKKKa1hLIaAQIECBAgQIAAAQIECBAgQIAAAcU0xwABoJjWMbjmCBAgQIAAAQIECBAgQIAAAQIEyhVQTCt37GROgAABAgQIECBAgAABAgQIECDQsYBiWsfgmiNAgAABAgQIECBAgAABAgQIEChXQDGt3LGTOQECBAgQIECAAAECBAgQIECAQMcCimkdg2uOAAECBAgQIECAAAECBAgQIECgXAHFtHLHTuYECBAgQIAAAQIECBAgQIAAAQIdCyimdQyuOQIECBAgQIAAAQIECBAgQIAAgXIFFNPKHTuZEyBAgAABAgQIECBAgAABAgQIdCygmNYxuOYIECBAgAABAgQIECBAgAABAgTKFVBMK3fsZE6AAAECBAgQIECAAAECBAgQINCxgGJax+CaI0CAAAECBAgQIECAAAECBAgQKFdAMa3csZM5AQIECBAgQIAAAQIECBAgQIBAxwKKaR2Da44AAQIECBAgQIAAAQIECBAgQKBcAcW0csdO5gQIECBAgAABAgQIECBAgAABAh0L/D9S+8lzAOsdUQAAAABJRU5ErkJggg==";
var picture = "{\pict\pngblip\picw1693\pich1693\picwgoal960\pichgoal960" + imagedata;

I then assign the string to a Rich Text Box (a sample winforms app that I am just trying to prove rtf file is valid).

this.richTextBox1.Rtf = rtf;

Nothing is displayed =(

Solution

I see two main issues with what you are trying to do. First, RTF requires media to be hex encoded, not Base64. So first convert your image data to a hex string. Then you need to change how you create your picture in RTF. A minor change, but it should make a difference. Change your var picture to this:

var picture = "{\pict\picw1693\pich1693\picwgoal960\pichgoal960\pngblip" + imagedata;

\pngblip is what tells the RTF reader that the picture data is coming next.