Convert inline SVG to Base64 string - javascript

I want to send an inline SVG image to a PHP script to Convert it to PNG with Imagick. For that I have to know how to get a base64 String out on an inline SVG. For canvas objects its a simple ".toDataURL()" but that doesn't work with inline SVGs, because its not a global function of elements.
test = function(){
var b64 = document.getElementById("svg").toDataURL();
alert(b64);
}
http://jsfiddle.net/nikolang/ccx195qj/1/
But how to do it for inline SVGs?


Use XMLSerializer to convert the DOM to a string
var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
and then btoa can convert that to base64
var encodedData = window.btoa(s);
Just prepend the data URL intro i.e. data:image/svg+xml;base64, and there you have it.


I just try to collect and explain all great ideas on this issue. This works on both Chrome 76 and Firefox 68
var svgElement = document.getElementById('svgId');
// Create your own image
var img = document.createElement('img');
// Serialize the svg to string
var svgString = new XMLSerializer().serializeToString(svgElement);
// Remove any characters outside the Latin1 range
var decoded = unescape(encodeURIComponent(svgString));
// Now we can use btoa to convert the svg to base64
var base64 = btoa(decoded);
var imgSource = `data:image/svg+xml;base64,${base64}`;
img.setAttribute('src', imgSource);


You can do it relatively straightforwardly as follows. The short version is
Make an image not attached to the dom
Set its size to match the source svg
base64 encode the source svg, append the relevant data, set img src
Get the canvas context; .drawImage the image
<script type="text/javascript">
window.onload = function() {
paintSvgToCanvas(document.getElementById('source'), document.getElementById('tgt'));
}
function paintSvgToCanvas(uSvg, uCanvas) {
var pbx = document.createElement('img');
pbx.style.width = uSvg.style.width;
pbx.style.height = uSvg.style.height;
pbx.src = 'data:image/svg+xml;base64,' + window.btoa(uSvg.outerHTML);
uCanvas.getContext('2d').drawImage(pbx, 0, 0);
}
</script>
<svg xmlns="http://www.w3.org/2000/svg" width="467" height="462" id="source">
<rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />
</svg>
<canvas height="462px" width="467px" id="tgt"></canvas>
JSFiddle: https://jsfiddle.net/oz3tjnk7/


I had the same problem while working on SVG based Floorplan Editor, after drawing a floorplan we have to save it for later use. Long story, code is better than talking, Here is the final code which worked for me:
async saveFloorplan() {
const svgElem = document.querySelector('#svg-element');
let xmlSource = new XMLSerializer().serializeToString(svgElem);
if (!xmlSource.match(/^<svg[^>]+xmlns="http:\/\/www\.w3\.org\/2000\/svg"/)) {
xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if (!xmlSource.match(/^<svg[^>]+"http:\/\/www\.w3\.org\/1999\/xlink"/)) {
xmlSource = xmlSource.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
// add xml declaration
xmlSource = `<?xml version="1.0" standalone="no"?>\r\n${xmlSource}`;
const svg64 = encodeURIComponent(xmlSource);
const b64Start = 'data:image/svg+xml;charset=utf-8,';
const imgEl = new Image();
const image64 = b64Start + svg64;
imgEl.src = image64;
const blobResp = await fetch(imgEl.src);
const blob = await blobResp.blob();
const payload = {...}
payload.fileExtension = 'svg';
payload.fileSize = blob.size;
const formData = new FormData();
formData.append('file', blob);
const uploaded = await api.uploadFile(formData);
}


This line will perform the conversion:
window.btoa($("svg").wrap("<div id='xyz'/>").parent().html());
Make sure that the proper charset/encoding has been selected!


// 1. get the element
let e = document.getElementById("svg");
// 2. get the string representation of the element
var s = new XMLSerializer().serializeToString(e);
// or
var s = e.outerHTML;
// 3. convert the string to url
// convert to utf8
var url = "data:image/svg+xml;utf8," + encodeURIComponent(s);
// convert to base64
var url = "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(s)));
// or
var url = "data:image/svg+xml;base64," + Buffer.from(s, "utf-8").toString("base64")

Related

Change segment text before processing using hls.js

so due to some security reason i want to add some extra text to .ts file in the begining of so when parsing it causes buffering issues
to fix this i decided to removed that 'extra' text i added before processing the segment issue is i dont know how to manipulate arraybuffer so i can remove that text since i am not that knowledgable on js
I tried many things including just download hlsjs file directly then edit readystatechange
// >= HEADERS_RECEIVED
if (readyState >= 2) {
....
if (isArrayBuffer)
{
console.log(xhr.response);
var ress = xhr.response;
//console.log(ress.replace('FFmpeg',''));
var enc = new TextDecoder('ASCII');
var seg = enc.decode(ress);
//var binaryArray = new Uint8Array(this.response.slice(0)); // use UInt8Array for binary
//var blob = new Blob([seg], { type: "video/MP2T" });
var enc = new TextEncoder(); // always utf-8
var newww = enc.encode(enc.encode(seg));
var ddd = newww.buffer;
console.debug( newww );
console.debug( newww.buffer);
//dec = dec.replace('ÿØÿà �JFIF','') ;
//xhr.response = Array.from(newww) ;
data = ddd;
len = data.byteLength;
the idea was to convert arraybuffer to string remove that text then convert it back to arraybuffer

base64-jpeg convert to base64-png

I have a base64 string in jpeg format, I need to convert it to base64 in png format. I know that this can be done using canvas and the toDataUrl method. But my jpeg picture has a 24bit color depth, if I put it on the canvas, I will get 32bit at the output.
So, is it possible to convert base64-jpeg to base64-png without intermediaries? Are there any such libraries in JS?
const canv = document.createElement('canvas');
const c = canv.getContext('2d');
c.drawImage(image, 0, 0);
const b64jpg = c.canvas.toDataURL('image/jpeg', 1); // 24bit
const b64png = c.canvas.toDataURL('image/png', 1); // 32bit

Dynamics365: How to convert binary image to actual image

I'm working on an app using nodejs and ionic that communicate with Dynamics 365.
My problem is that I don't understand the return of the image.
According to the contact EntityType documentation
entityimage Edm. Binary Shows the default image for the record
Here's what returns the CRM for the image:
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
What is this format ? How can I convert it so I can display an image ?
EDIT 1
I have tried this way
var img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your-binary-data');
document.body.appendChild(img);
but doesn't work

There is an example here for working with entity images here. It's C#, but the same basic principles apply.
Retrieves the records with the entityimage attribute and saves the
resized files.
//Retrieve and download the binary images
string binaryImageQuery = String.Format(#"<fetch mapping='logical'>
<entity name='{0}'>
<attribute name='sample_name' />
<attribute name='entityimage' />
</entity>
</fetch>",_customEntityName.ToLower());
EntityCollection binaryImageResults = _serviceProxy.RetrieveMultiple(new FetchExpression(binaryImageQuery));
Console.WriteLine("Records retrieved and image files saved to: {0}", Directory.GetCurrentDirectory());
foreach (Entity record in binaryImageResults.Entities)
{
String recordName = record["sample_name"] as String;
String downloadedFileName = String.Format("Downloaded_{0}", recordName);
byte[] imageBytes = record["entityimage"] as byte[];
var fs = new BinaryWriter(new FileStream(downloadedFileName, FileMode.Append, FileAccess.Write));
fs.Write(imageBytes);
fs.Close();
Console.WriteLine(downloadedFileName);
}

All I had to do was
let img = "data:image/png;base64,"+ "binary-data";

Exception when converting to image from Base-64 string

I am trying to send a Highcharts chart via image on ASP.NET button click.
What I am trying to do is:
Convert the chart to base64 image, the code is the following :
var chart = $('#main-content').highcharts();
EXPORT_WIDTH = 1000;
var render_width = EXPORT_WIDTH;
var render_height = render_width * chart.chartHeight / chart.chartWidth;
var svg = chart.getSVG({
exporting: {
sourceWidth: chart.chartWidth,
sourceHeight: chart.chartHeight
}
});
var contentToSend = 'data:image/svg+xml;base64,' + window.btoa(svg);
var hdnField = document.getElementById("MainContent_ChartImage");
hdnField.value = contentToSend;
Next step is taking the base64 image value, convert it to image an attach it to the mail, the code is:
string textImage = ChartImage.Value;
var imageData = Convert.FromBase64String(HttpUtility.UrlDecode(data));
System.Net.Mail.LinkedResource res;
AlternateView htmlView;
using (MemoryStream ms = new MemoryStream(imageData, true))
{
ms.Position = 0;
ms.Write(imageData, 0, imageData.Length);
ms.Seek(0, SeekOrigin.Begin);
res = new System.Net.Mail.LinkedResource(ms);
htmlView = AlternateView.CreateAlternateViewFromString("<html><body><img src='cid:imageReport' width='100%' ></body></html>", null, "text/html");
res.ContentId = "imageReport";
htmlView.LinkedResources.Add(res);
MailMessage mailMsg = new MailMessage();
SmtpClient client = new SmtpClient();
// ...
mailMsg.IsBodyHtml = true;
mailMsg.AlternateViews.Add(htmlView);
client.Send(mailMsg);
}
but the method Convert.FromBase64String throws an exception
{"The input is not a valid Base-64 string as it contains a non-base 64
character, more than two padding characters, or an illegal character
among the padding characters. "}
However when I remove 'data:image/svg+xml;base64,' then convert it, it doesn't throw an exception but the image will not appear. What should I do?
Thank you

Get rid of the beginning part of the string: "data:image/svg+xml;base64," that part is not base64, just the remainder is. You don't need to use HttpUtility.UrlDecode either.
You should specify the TransferEncoding as Base64:
res.TransferEncoding = System.Net.Mime.TransferEncoding.Base64;
However with all that said, there are some strong caveats to using SVG in email. So you may want to consider a different format such as JPG or PNG. If that's the route you take, you will need to use a library to convert formats.

After many researches I found the solution , the main problem was that not all client email support data URI :
What is Data URI support like in major email client software?
i was trying to open the mail from the outlook 2016 however it is not supported , when i opened from hotmail.com it worked..
the code is :
MailMessage mailMsg = new MailMessage();
SmtpClient client = new SmtpClient();
var imageData = Convert.FromBase64String(data);
var contentId = Guid.NewGuid().ToString();
var linkedResource = new LinkedResource(new MemoryStream(imageData), "image/svg+xml");
linkedResource.ContentId = contentId;
linkedResource.TransferEncoding = TransferEncoding.Base64;
var body = string.Format("<img src=\"cid:{0}\" />", contentId);
var htmlView = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
htmlView.LinkedResources.Add(linkedResource);
mailMsg.AlternateViews.Add(htmlView);

Opening PDF String in new window with javascript

I have a formatted PDF string that looks like
%PDF-1.73 0 obj<<< /Type /Group /S /Transparency /CS /DeviceRGB >> /Resources 2 0 R/Contents 4 0 R>> endobj4 0 obj<> streamx��R=o�0��+��=|vL�R���l�-��ځ,���Ge�JK����{���Y5�����Z˯k�vf�a��`G֢ۢ��Asf�z�ͼ��`%��aI#�!;�t���GD?!���<�����B�b��
...
00000 n 0000000703 00000 n 0000000820 00000 n 0000000926 00000 n 0000001206 00000 n 0000001649 00000 n trailer << /Size 11 /Root 10 0 R /Info 9 0 R >>startxref2015%%EOF
I am trying to open up this string in a new window as a PDF file. Whenever I use window.open() and write the string to the new tab it thinks that the text should be the contents of an HTML document. I want it to recognize that this is a PDF file.
Any help is much appreciated

Just for information, the below
window.open("data:application/pdf," + encodeURI(pdfString));
does not work anymore in Chrome. Yesterday, I came across with the same issue and tried this solution, but did not work (it is 'Not allowed to navigate top frame to data URL'). You cannot open the data URL directly in a new window anymore.
But, you can wrap it in iframe and make it open in a new window like below. =)
let pdfWindow = window.open("")
pdfWindow.document.write(
"<iframe width='100%' height='100%' src='data:application/pdf;base64, " +
encodeURI(yourDocumentBase64VarHere) + "'></iframe>"
)

var byteCharacters = atob(response.data);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var file = new Blob([byteArray], { type: 'application/pdf;base64' });
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
You return a base64 string from the API or another source. You can also download it.

You might want to explore using the data URI. It would look something like.
window.open("data:application/pdf," + escape(pdfString));
I wasn't immediately able to get this to work, possible because formating of the binary string provided. I also usually use base64 encoded data when using the data URI. If you are able to pass the content from the backend encoded you can use..
window.open("data:application/pdf;base64, " + base64EncodedPDF);
Hopefully this is the right direction for what you need. Also note this will not work at all in IE6/7 because they do not support Data URIs.

window.open("data:application/pdf," + escape(pdfString));
The above one pasting the encoded content in URL. That makes restriction of the content length in URL and hence PDF file loading failed (because of incomplete content).

This one worked for me.
window.open("data:application/octet-stream;charset=utf-16le;base64,"+data64);
This one worked too
let a = document.createElement("a");
a.href = "data:application/octet-stream;base64,"+data64;
a.download = "documentName.pdf"
a.click();

I realize this is a pretty old question, but I had the same thing come up today and came up with the following solution:
doSomethingToRequestData().then(function(downloadedFile) {
// create a download anchor tag
var downloadLink = document.createElement('a');
downloadLink.target = '_blank';
downloadLink.download = 'name_to_give_saved_file.pdf';
// convert downloaded data to a Blob
var blob = new Blob([downloadedFile.data], { type: 'application/pdf' });
// create an object URL from the Blob
var URL = window.URL || window.webkitURL;
var downloadUrl = URL.createObjectURL(blob);
// set object URL as the anchor's href
downloadLink.href = downloadUrl;
// append the anchor to document body
document.body.appendChild(downloadLink);
// fire a click event on the anchor
downloadLink.click();
// cleanup: remove element and revoke object URL
document.body.removeChild(downloadLink);
URL.revokeObjectURL(downloadUrl);
});

An updated version of answer by #Noby Fujioka:
function showPdfInNewTab(base64Data, fileName) {
let pdfWindow = window.open("");
pdfWindow.document.write("<html<head><title>"+fileName+"</title><style>body{margin: 0px;}iframe{border-width: 0px;}</style></head>");
pdfWindow.document.write("<body><embed width='100%' height='100%' src='data:application/pdf;base64, " + encodeURI(base64Data)+"#toolbar=0&navpanes=0&scrollbar=0'></embed></body></html>");
}

I just want to add with #Noby Fujioka's response, Edge will not support following
window.open("data:application/pdf," + encodeURI(pdfString));
For Edge we need to convert it to blob and this is something like following
//If Browser is Edge
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
var byteCharacters = atob(<Your_base64_Report Data>);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {
type: 'application/pdf'
});
window.navigator.msSaveOrOpenBlob(blob, "myreport.pdf");
} else {
var pdfWindow = window.open("", '_blank');
pdfWindow.document.write("<iframe width='100%' style='margin: -8px;border: none;' height='100%' src='data:application/pdf;base64, " + encodeURI(<Your_base64_Report Data>) + "'></iframe>");
}

Based off other old answers:
escape() function is now deprecated,
Use encodeURI() or encodeURIComponent() instead.
Example that worked in my situation:
window.open("data:application/pdf," + encodeURI(pdfString));
Happy Coding!

I had this problem working with a FedEx shipment request. I perform the request with AJAX. The response includes tracking #, cost, as well as pdf string containing the shipping label.
Here's what I did:
Add a form:
<form id='getlabel' name='getlabel' action='getlabel.php' method='post' target='_blank'>
<input type='hidden' id='pdf' name='pdf'>
</form>
Use javascript to populate the hidden field's value with the pdf string and post the form.
Where getlabel.php:
<?
header('Content-Type: application/pdf');
header('Content-Length: '.strlen($_POST["pdf"]));
header('Content-Disposition: inline;');
header('Cache-Control: private, max-age=0, must-revalidate');
header('Pragma: public');
print $_POST["pdf"];
?>

//for pdf view
let pdfWindow = window.open("");
pdfWindow.document.write("<iframe width='100%' height='100%' src='data:application/pdf;base64," + data.data +"'></iframe>");

One suggestion is that use a pdf library like PDFJS.
Yo have to append, the following "data:application/pdf;base64" + your pdf String, and set the src of your element to that.
Try with this example:
var pdfsrc = "data:application/pdf;base64" + "67987yiujkhkyktgiyuyhjhgkhgyi...n"
<pdf-element id="pdfOpen" elevation="5" downloadable src="pdfsrc" ></pdf-element>
Hope it helps :)

Just encode your formatted PDF string in base 64. Then you should do:
$pdf = 'data:application/pdf;base64,'.$base64EncodedString;
return this to javascript and open in a new window:
window.open(return);

use function "printPreview(binaryPDFData)" to get print preview dialog of binary pdf data.
printPreview = (data, type = 'application/pdf') => {
let blob = null;
blob = this.b64toBlob(data, type);
const blobURL = URL.createObjectURL(blob);
const theWindow = window.open(blobURL);
const theDoc = theWindow.document;
const theScript = document.createElement('script');
function injectThis() {
window.print();
}
theScript.innerHTML = `window.onload = ${injectThis.toString()};`;
theDoc.body.appendChild(theScript);
};
b64toBlob = (content, contentType) => {
contentType = contentType || '';
const sliceSize = 512;
// method which converts base64 to binary
const byteCharacters = window.atob(content);
const byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
const blob = new Blob(byteArrays, {
type: contentType
}); // statement which creates the blob
return blob;
};

for the latest Chrome version, this works for me :
var win = window.open("", "Title", "toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=200,top="+(screen.height-400)+",left="+(screen.width-840));
win.document.body.innerHTML = 'iframe width="100%" height="100%" src="data:application/pdf;base64,"+base64+"></iframe>';
Thanks

Categories

Resources