You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on Mar 6, 2019. It is now read-only.
, when dowloaded by v2.0, result into svg file with missing rasters.
The solution would be 1/ to convert file.jpg into a data URI string (var str) using JS. 2/ to replace
<image xlink:href="file.jpg" ...
by
<image href="data:image/png;base64,<dataURI>" ...
3/ to repeat for each <image xlink:href= found.
The JS code to do 1. have been discussed here while 1 & 2 are in demo there (v/96/). The script successfully replace the href link by an href with valid and working data uri, so the image is really embedded within the svg. Then, crowbar naturally download both the SVG code and the (embedded) images :)
Note: as my stack appears to require server side base64 convertion and my d3js skills are limited, I will not push further in this way. But most of it is there, and it should be good to add to crowbar.
Note: I didn't tested if the data_uri type extension should really match the image's extension.
The text was updated successfully, but these errors were encountered:
varconverterEngine=function(input){// fn BLOB => Binary => Base64 ?varuInt8Array=newUint8Array(input),i=uInt8Array.length;varbiStr=[];//new Array(i);while(i--){biStr[i]=String.fromCharCode(uInt8Array[i]);}varbase64=window.btoa(biStr.join(''));console.log("2. base64 produced >>> "+base64);// print-check conversion resultreturnbase64;};vargetImageBase64=function(url,callback){// 1. Loading file from url:varxhr=newXMLHttpRequest(url);xhr.open('GET',url,true);// url is the url of a PNG image.xhr.responseType='arraybuffer';xhr.callback=callback;xhr.onload=function(e){if(this.status==200){// 2. When loaded, do:console.log("1:Loaded response >>> "+this.response);// print-check xhr response varimgBase64=converterEngine(this.response);// convert BLOB to base64this.callback(imgBase64);//execute callback function with data}};xhr.send();};//SVG DOM injectiongetImageBase64('http://fiddle.jshell.net/img/logo.png',function(data){d3.selectAll("image").attr("href","data:image/png;base64,"+data);// replace link by data URI})
Is there any chance this will be incorporated into SVG crowbar? It could be very useful - particularly if your graphic is using some external SVG icons.
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Currently, d3js generated SVG with linked images via :
producing :
, when dowloaded by v2.0, result into svg file with missing rasters.
The solution would be 1/ to convert file.jpg into a data URI string (
var str
) using JS. 2/ to replaceby
3/ to repeat for each
<image xlink:href=
found.The JS code to do 1. have been discussed here while 1 & 2 are in demo there (v/96/). The script successfully replace the href link by an href with valid and working data uri, so the image is really embedded within the svg. Then, crowbar naturally download both the SVG code and the (embedded) images :)
Note: as my stack appears to require server side base64 convertion and my d3js skills are limited, I will not push further in this way. But most of it is there, and it should be good to add to crowbar.
Note: I didn't tested if the data_uri type extension should really match the image's extension.
The text was updated successfully, but these errors were encountered: