Loading a large jpg file using type of 'image' as in examples
from
https://openseadragon.github.io/examples/tilesource-image/
is showing up with multiple duplicate tiles on the viewport.
a missing configuration setting?
jQuery(document).ready(function() {
OpenSeadragon({
id: "openseadragon",
prefixUrl: "data/",
debugMode:true,
tileSources: {
type: 'image',
url: '../data/gudmap/large.jpg'
}
});
[new] after more trying, it is not when the jpg file is big but when the jpg file is actually small that it gets duplicate into multiple tiles.
The image tile source loads the single image you give it and breaks it into multiple tiles to make drawing more efficient. I imagine that's what you're seeing.
Related
hey guys i have sime markdown (mdx) files that i want to use an svg with. i know that rendering dynamic ANYTHING in gatsby can be tricky.. with gatsby image you often have to filter out the right results. but for svgs specifically i m wondering how i render them dynamically depending on frontmatter in my markdown. i tried doing an <img src={svgpath} /> to no avail. and right now my svgs are beng imported as components using this in my config:
"gatsby-transformer-sharp",
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /assets/
}
}
},
i dont know of a way to dynamically import files nor dynamically render the appropriate svg that matches the name in the markdown. here is as an example of the frontmatter in my markdown:
---
title: Pediatric Dentistry
slug: pediatric-dentistry
svgPath: '../images/assets/dental.svg'
---
how can i do something that dynamically shows the correct svg in my template file for each specific markdown file? i can dynamically render png, jpg, etc but becuase of svgs specific need to be imported as a component using transofmrer-sharp in gatsby im struggling. thanks in advance!
One thing that comes to my mind is to create a kind of map, a key-value pair that imports your desired component. Something like:
import Dental from '../images/assets/dental.svg';
import OtherSvg from '../images/assets/otherSvg.svg';
import OtherLogo from '../images/assets/otherLogo.svg';
const SVGMapper = {
'dental': Dental,
'otherSvg': OtherSvg,
'otherLogo': OtherLogo,
};
export default SVGMapper;
And so on...
Then, to render it from your markdown, you just need to:
let SVGComponent = SVGMapper['dental'];
return <SVGComponent />;
You can make it dynamic using a loop or whatever you want.
You can even change the key (dental, otherSvg and otherLogo) for the path if needed. The approach is exactly the same, you will need to change the key for your SVG path and render SVGMapper[svgPath]
When importing external SVG images the Inkscape offers three options:
Include SVG image as editable object(s) in the current file
Embed the SVG file in a image tag (not editable in this document)
Link the SVG file in a image tag (not editable in this document)
At first, for convenience I imported an SVG images (Image A) into master SVG image B in the third way (Link the SVG file) so that when editing image A, master image B changes accordingly. However, later in the publishing process, I found that I needed to make sure every part in master image B had to be editable, including those parts within image A.
Had I imported image A in the first way above (include SVG image), this would be possible. I had made some transformations to the linked image A within master image B so I didn't want to do it again. Is there a way to transform a linked image (<image xlink:href="XXX.svg" />) to an included image (<svg>...</svg>) with just a few clicks while preserving all the transformations I did to this image?
Right-click on the image and select 'Embed image'. This is going to embed it as an image, <svg:image ...>, though, not as an svg (I think that would be invalid SVG code, too).
For multiple images, use the extension 'Extensions > Images > Embed Images' without any image selected (or with all of them).
I'm doing a custom game which I'd like to change the background and a character picture according to a file they upload.
The input file is outside phaser. If possible, I'd like to show the picture directly without uploading to the server.
If you use a file loader to get the base64 encoding of the image, you can use this.textures.addBase64 to load the image into the texture manager, after that loads you can create new objects with that image tag, or set existing images to that texture.
Working Example =>
https://stackblitz.com/edit/phaser-use-uploaded-image
I need to render a chart as a .html file on the node.js side.
Are there any libraries which can do that?
I was doing some research, and every one of them is saving it as a .png file.
What I want to achieve is that I want to allow users to hover on chart etc. that's why I cannot use .png file
You can use highcharts-export-server to generate a chart in SVG format, but the case with interaction is complicated - please check this thread: https://github.com/highcharts/highcharts/issues/7058
However, I think the amount of data that you want to show on a chart is not so huge. Highcharts provide boost module and dataGrouping in Highstock, which will effectively improve performance:
Highcharts.chart('container', {
boost: {
seriesThreshold: 1
},
series: [...]
});
Live demo: http://jsfiddle.net/BlackLabel/mhgraqbs/
I'm developing an app that grabs the HTML from a webpage and looks at images, within the HTML, that can be compressed and resized.
I can do the first part no problem in node, using Sharp here:
https://www.npmjs.com/package/sharp
I can, of course, resize the same image here too. I just don't know what dimensions to use. I don't want a tiny image to scale up and so on.
Can I somehow detect the size of the image on screen using the HTML I got to begin with?
Thanks in advance.
EDIT:
Sorry for any confusion. I need to know how big the image is being displayed on the page. So, the image may be 400x400 but the css could limit it to 200x200.
If I have a large image (1000x1000) but it's only being shown on screen at 500x500, I'd know it's a great candidate for resizing.
I'm just not sure how I can resize based on it's css dimensions.
I think in Sharp there's a metadata function that lets you access image metadata, e.g. format, width, height, etc.
Example:
const image = sharp(inputJpg);
image.metadata().then(function(metadata) {
// print image width and height
console.log({
width: metadata.width,
height: metadata.height
});
});
In Sharp library,
You can get dimension from this document:
http://sharp.dimens.io/en/stable/search.html?q=dimension
Hope it will help you.
const sharpImage = sharp('test/test.jpg');
image.metadata().then(function(metadata) {
console.log(metadata);
});