Currently, I can only use jpeg & png exports like:
stageRef.current?.getStage().toDataURL({ mimeType: 'image/jpeg', quality: 1 })
stageRef.current?.getStage().toDataURL({ mimeType: 'image/png', quality: 1 })
I want to export Canvas to svg as well as pdf like Figma does it.
I found out about Data URIs which led to MIME_types. In there, they have written application/pdf & image/svg+xml should work but when I do that I still get a .png image.
Is there any way to achieve .svg & .pdf from Canvas in Konva?
stage.toDataURL() is using canvas.toDataURL() API to do the export. Most of the browsers support only jpg and png formats.
For SVG or PDF exports you have to write your own implementation.
For PDF exports you may use external libraries to generate a PDF file with an image from stage.toDataURL() method. As a demo take a look into Saving Konva stage to PDF demo.
There are no built-in methods for SVG exports in Konva library. You have to write your own implementation. If you use basic shapes such as Rect, Circle and Text without any fancy filters, writing such conversions shouldn't be hard, because there are similar tags in SVG spec.
toDataUrl() exports a bitmap, rather than a vector.
You can generate an svg by using the canvas2svg package.
You can set your Layer's context equal to a c2s instance, rendering it, and resetting your Layer's ref to what it was previously, as shown here.
Related
I am trying to build plug in the image extension (#tiptap/extension-image) to my tiptap editor, however the issue I find is with bigger images, there is no easy way to add a sort of placeholder image or text to tell the user the image is being uploaded.
The current flow is this:
const imageUrl = await doUpload();
editor.chain().focus().setImage({ src: imageUrl }).run()
So between uploading the image and setting the image, there is a delay and no feedback to the user.
So I have tried to extend the Image extension and I am able to create a method to set some text, but then I am not sure how to clear that text. Does anyone have a good solution for this?
So the simple idea is that I have SVG data as a string that I fetch from Internet.
I would like to show that as an icon in my app. Is there any way I can do this?
I have seen countless examples where SVG data is in a file located in the app's directory that is then showed but this is not what I am looking for. I literally have the data in XML format after http request and I only need to transform that to a Image or something else visible on the screen.
I have been trying to find a solution to this for hours now, so I would really appreciate some help :S
Android doesn't support svg with ImageView directly,you could display SVG with some commonly used third-party controls.
Like FFImageLoading.
Add Xamarin.FFImageLoading.Svg nuget package to platform project. Use ImageService with svg data resolver for displaying svg images.
For Android:
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
then use like:
var svgString = #"<svg><rect width=""30"" height=""30"" style=""fill:blue"" /></svg>";
ImageView imageView = FindViewById<ImageView>(Resource.Id.image_view);
ImageService.Instance
.LoadString(svgString)
.LoadingPlaceholder(placeHolderPath)
.WithCustomDataResolver(new SvgDataResolver(64, 0, true))
.WithCustomLoadingPlaceholderDataResolver(new SvgDataResolver(64, 0, true))
.Into(imageView);
I am trying to do something I feel is very simple, yet seems that I am clearly misunderstanding a crucial piece of the mapbox addlayer feature.
The Goal
Create dynamically identified icons, based on a features data value (e.g. geojson feature data vale title: "walmart"). Essentially just adding dynamic store icons from the sprite image when those locations are queried via tilequery. picture representation here
The problem
I keep getting an error when trying to use the sprite values from the style. Error: util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
I see tons of resources talking about sprites, but none discuss how to exactly implement them in this fashion. I have even tried querying the sprite and then adding the values using dot notation to access sprite values. This gives an error of "undefined" and invalid value.
Example code:
map.addLayer({
id: "tilequery-points",
type: "symbol",
source: "tilequery", // Set the layer source
layout: {
"icon-image": [
"match",
["get", "title"],
["HEB"],
"H-E-B_logo",
["Pilot Flying j"],
sprite.Pilot_Travel_Centers_logo,
// "Pilot_Travel_Centers_logo",
["Dollar General"],
"Dollar_General_logo",
["Cumberland Farms Corp"],
"Cumberland_Farms_logo (1)",
["CEFCO"],
"CEFCO-convenience-stores-Logo_510px",
["BJs Wholesale Inc"],
The Question
How do I access the sprite values and not get an error?!!!
Thanks for the help! I Wouldn't ask if I didn't need it!
UPDATE
I have figured out that to use sprite images inside of any layer, the images will automatically be available if you have them in your Mapbox studio sprite image collection. The confusion was that previously, I was not able to use them from link. However, it should work automatically.
Hope it helps!
It's true the documentation about sprites is not super clear. I'll try to summarise (simplifying a bit).
A Mapbox GL style has one sprite. That's a PNG containing all the icons, plus a JSON file specifying what each icon is called (its icon ID), and where it located within the PNG. The sprite is specified by giving a URL as the sprite property: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/
You can also add images to the sprite dynamically after the map loads, with map.loadImage and map.addImage, specifying the icon ID.
To display an icon, you use that same ID in a symbol layer: "icon-image": "myicon".
You can run into trouble when you try to combine your own icons with those in a Mapbox basemap (which are Maki icons with names like `airport-11').
To combine them, you can do one of these three things:
upload your icons to a style in Mapbox Studio
load your icons dynamically
generate a new sprite sheet offline, using something like mbsprite
I don't know what you meant about "dot notation", but no, that's not the right path.
According to the documentation (https://developer.garmin.com/connect-iq/programmers-guide/resource-compiler/) the resource compiler supports GIF as Bitmap. However, when I display a GIF file, I just get a still picture, and the GIF doesn't move.
The GIF I have been testing with is this: http://bestanimations.com/Animals/Mammals/Cats/cats/cute-kitty-animated-gif-2.gif
and I have saved the gif in the drawables folder (I use the ConnectIQ-plugin for Eclipse).
I have tried to include the Bitmap in the layouts resources as:
<layout id="MainLayout">
<bitmap id="MotivatorCat" x="center" y="center" filename="../drawables/motivatorcat.gif"/>
</layout>
and I have tried to include it in the drawables resources as:
<drawables>
<bitmap id="MotivatorCat" filename="motivatorcat.gif" />
</drawables>
and then loading it in initialize() by:
catgif = Ui.loadResource(Rez.Drawables.MotivatorCat);
and drawing it in onUpdate():
dc.drawBitmap(50, 50, catgif);
But nothing works.
What am I doing wrong?
The Connect IQ does not currently (as of SDK 2.1.x) support rendering of animated GIF images.
May I know how to determine the output of Bing map static image? Previously it used to be in png but now it is in jpeg. May I know how to revert back to png format?
Example: Display the image with the link below:
http://dev.virtualearth.net/REST/V1/Imagery/Map/Road/space%20needle,seattle?mapLayer=TrafficFlow&mapVersion=v1&key=BingKey
The image is in jpeg. How to make it to png? Thanks.
I know it's a while you posted this question, but as there is no answer yet, and I got here via Google I'll supply an answer anyway.
You can use the format / fmt parameter.
From: http://msdn.microsoft.com/en-us/library/ff701724.aspx
One of the following image format values:
gif: Use GIF image format.
jpeg: Use JPEG image format. JPEG format is the default for Road, Aerial and AerialWithLabels imagery.
png: Use PNG image format. PNG is the default format for CollinsBart and OrdnanceSurvey imagery.
Examples:
format=jpeg
fmt=gif
I don't think you can request the image in a different format.
From http://msdn.microsoft.com/en-us/library/ff701724.aspx :
This URL returns an image in one of
the following formats:
PNG (image/png)
JPEG (image/jpeg)
GIF (image/gif)
You cannot specify the output format
for the map image. The image type is
chosen based on parameters such as
imagerySet.
If you really want a PNG, you could make the request from a server-side script and then construct a PNG file programmatically before serving that back to the client (using PHP's imagepng function, for example)