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
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 generated a list of Maki Icons I want to use via the original icon editor.
drawMarkers() {
let self = this;
const mapboxgl = require("mapbox-gl");
let data = this.draw.getAll();
data.features.forEach((feature) => {
if (feature.geometry.type == "Point") {
var icon = feature.properties.icon;
var title = feature.properties.title;
if (typeof title === "undefined") {
title = "Info";
} else {
var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(`<h3>${title}</h3>`);
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
.setLngLat(feature.geometry.coordinates)
.setPopup(popup)
.addTo(self.map);
}
});
The Markers are showed correctly on the Mapbox.
The GeoJSON is like this:
"type":"FeatureCollection",
"features":[
{
"id":"c749de6a6eac6b1cfdda890e7c665e0d",
"type":"Feature",
"properties":{
"icon":"ferry",
"title":"This should show a Ferry icon",
"portColor":"#d9eb37"
},
"geometry":{
"coordinates":[
6.12,
22.44
],
"type":"Point"
}
},
I want the Maki Icons also added in the Marker, but I cannot find any documentation of how icons can be used inside the Mapbox Marker.
Who can help me out? I'm using the Mapbox GL JS for Web.
It depends on how you've created your map. You can either:
Create your own map style using the Maki icons you've generated. This is done using the Mapbox studio to create your custom map style, then adding it to your application.
Create custom markers that use the maki .svg files you've created. This can be done by passing a custom element to the new mapboxgl.Marker() function. So, instead of:
var marker = new mapboxgl.Marker({
color: '#333',
draggable: false,
scale: 1,
})
you would pass:
var marker = new mapboxgl.Marker(customElement)
where customElement uses the data from your icons variable.
I'm not sure if you're using plain JS here, but there's some examples on the mapbox docs of ways you can do this.
Because you've generated your own list of Maki icons, I'd suggest downloading them and maybe host them somewhere so that you can get away with creating your markers with <img src="link to hosted maki marker"/> or something of the sort
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.
In TinyMCE editor, is it possible to turn on the resizing handles on div like they are available on images?
The object_resizing setting can only take true, false, img as possible values.
See https://www.tinymce.com/docs/configure/advanced-editing-behavior/#object_resizing
The TinyMCE source code has a isResizable function which contains
if (typeof selector != 'string') {
selector = 'table,img,figure.image,div';
}
and a showResizeRect function which activates the resizing handles.
I have not been able to activate it for a div.
This is what I have tested so far :
editor.addButton('Test', {
text: 'Test',
onclick: function() {
editor.selection.getNode().setAttribute("data-mce-resize","1");
console.log(editor.selection.controlSelection.isResizable(editor.selection.getNode()));
editor.selection.controlSelection.showResizeRect(editor.selection.getNode());
}
});
isResizable is false
Any clue?
Your code works fie on my end:
http://fiddle.tinymce.com/cugaab
I add type to the editor, highlight and use the bottom Formats>Blocks>Div option to put a div around it, use your test button and I get resize handles and the console logs 'true'.
Resized div image
I'm using the basic html2canvas functionality with a gif image inside of a div. When I convert the div to canvas the image loses quality slightly. Is there a fix for this, or some option I should be setting?
html2canvas($("#panel-container"), {
proxy: "https://html2canvas.appspot.com/query",
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
html2canvas();
jsfiddle.net/6MnEu/1/