I have tried to export the PNG related to the graph provided as sample for the integration of popper.js with cytoscape.js, but the exported png does not include the popper content when exported.
The reference sample is: https://cytoscape.org/cytoscape.js-popper/
The refence code to export the PNG is the following one:
var text = window.cy.png({'output': 'blob'});
var name = "test.png";
var type = "image/png";
var a = document.getElementById("downloadpng");
var file = new Blob([text], { type: type });
a.href = URL.createObjectURL(file);
a.download = name;
a.click();
This is the resulting image when exporting cy.png() included a popper.js content
I would say this is the expected behavior: image export in Cytoscape.js takes the Cytoscape.js canvas and exports it as image. The popper.js labels are not in the canvas - they are separate div objects in the DOM. Hence they are not included in the exported image.
Related
Here is the code snippet:
The PDF generated by this snippet contains, google maps, visual data from anychart.js, and other content. Everything is working fine but there are a few images that are also added dynamically to the HTML page like other things, are not passing to the PDF.
html2canvas($("#content")[0], {allowTaint: false,useCORS: true})
.then(function (canvas) {
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height*0.68]);
pdf.addImage(imgData, 'JPG');
pdf.save(`${officerName}_shiftReport(${reportID}).pdf`);
});
I created an img element string with base64 source. when tried to display it in sap.ui.richtexteditor.RichTextEditor, I got nothing. How to display it? see my code.
// controller
var template = {};
var image ="<img src="data:image/bmp;base64,/9j/4AAQSkZJRg...">";
template.body = image;
var oViewModel = new JSONModel(template);
this.getView().setModel(oViewModel, "template");
//view
<rte:RichTextEditor id="rte" value="{template>/body}" editorType="TinyMCE4" customToolbar="true" showGroupFont="true" showGroupInsert="true"
showGroupLink="true" height="360px"/>
why dont use the Image Control?
<Image src='data:image/png;base64,iVBORw0KGgoA...........=='/>
I've setup tinyMCE to do image uploading and it displays uploaded images in the editor, but on inspecting the source of the editors HTML I can see that the src attribute is set like it would be a file path:
<img src="../../../api/images/1"/>
I have a file_picker_callback which POSTs the image to my backend server to save the image, and returns an absolute URL in the "location" key as specified in the tinyMCE docs: https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_url
But I am unsure why regardless of providing an absolute URL the src set on the image begins with "../../../".
The relevant tinyMCE configuration:
tinymce.init({
file_picker_types: 'file image',
file_picker_callback: function(cb, value, meta) {
let tinyMCE = this;
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*,.doc,.docx,.txt,.rtf,.odt,.pdf');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
// Register the blob in TinyMCEs image blob registry.
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinyMCE.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
backend.save(file).then(
fileLocation => {
let options = {};
if (meta.filetype == 'file') {
options = {
title: file.name,
text: 'My Attachment'
};
}
cb(fileLocation, options);
},
(/* error */) => {
blobCache.removeByUri(blobInfo.blobUri());
}
);
};
reader.readAsDataURL(file);
};
input.click();
}
});
I can see that there is an options object I can pass to the callback which sets some element attributes of the image, but I can't find a reference to what this object can contain in the docs :(
Would like some help to solve this and get absolute URLs in my image srcs, thanks
convert_urls: false,
By default all URLs are automatically converted to relative URLs. If you want to insert the real URL of the uploaded image, set convert_urls option to false. It will restore URLs to their original values.
I am using google charts and have a page of mixed charts, some pie, a column chart and a gauge chart
The page has an option to generate a pdf, so I am converting the charts to PNG to use in the pdf..
all the charts are generated in the same manner, using a div to display the google chart and a hidden div to store the png image
var chart = new google.visualization.Gauge(document.getElementById('gauge'));
var hidden = new google.visualization.Gauge(document.getElementById('gauge_hidden'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
gauge_hidden.innerHTML = '<img src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
this code works fin on he pie and column charts, but on the gauge chart I am seeing
chart.getImageURI is not a function
any ideas how I can get the png?
CHeers
I was facing this same issue, but after some reading i've come to this solution:
I'm using jQuery to make this a little easier.
First, use XMLSerializer to convert the SVG chart to a string and then use btoa to convert that to base64.
You can use this string this way:
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var base64String = "data:image/svg+xml;base64," + window.btoa(s);
In my case i needed to draw the gauge chart to a PDF and DOMPDF doesn't support this format, so if you need a "data:image/png;base64," string, you can continue with this solution.
You need to set the "svg+xml;base64" as src of a new Image and then draw that image to a Canvas. After that you can use toDataURL method from canvas to get the content as base64 png.
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var image = new Image();
image.width = 640;
image.height = 480;
image.src = 'data:image/svg+xml;base64,' + window.btoa(s);
var myCanvas = document.createElement('canvas');
myCanvas.width = 640;
myCanvas.height = 480;
var myCanvasContext = myCanvas.getContext('2d');
myCanvasContext.drawImage(image,0,0);
// get google chart gague to base64, yey!
var base64String = myCanvas.toDataURL();
Thanks to the author of this answer and this post
When PreloadJS loads in an SVG via LoadQueue(false), the result will be an <object/> as opposed to an <img/>.
It seems that the EaselJS Bitmap() constructor will only display SVG loaded in as <img/>.
How can I either:
Get Bitmap() to accept the SVG <object/> as loaded in in by PreloadJS.
OR get PreloadJS to load the SVG in as <img/>.
OR convert the SVG <object/> to <img/>
"preloadjs": "1.0.1"
var loader = new createjs.LoadQueue(crossOrigin = '');
loader.on("complete", onComplete);
loader.loadManifest([
{ id: "map", src: "map/monitor.svg", type: createjs.Types.IMAGE },
]);
function onComplete(e) {
//画背景图
drawImage(bgLayer, loader.getResult('map'), 0, 0);
}
Unable to preload and display SVG with CreateJS