Any updates or modifications you make to your profile picture appear on your timeline and News Feeds. They will also save to your Profile Pictures album.
Understanding image download options
In this help doc, you can find out more about the image export options of all Flourish templates, as well as in what formats can they be downloaded and why.
While SVG downloads are only possible for SVG-based templates (see below), some templates don’t have an image download option at all. The reasons for this are mainly technical, and have to do with the fact that some of our templates use WebGL for rendering interactive 2D and 3D graphics.
You can easily achieve the same result of an image download by doing a screenshot of your visualization.
Why some templates have no SVG download option?
Some of our Flourish templates are SVG-based, while others are drawn in Canvas mode. The Canvas mode is generally preferable as it’s a bit quicker, especially if there are a lot of items, which is why it is the default choice in some templates. In other words, only SVG-containing templates allow for SVG image download.
The reason why your visualization is being exported without text elements is due to the fact that the SVG download option only exports vector files. We recommend exporting charts as SVG files if you are planning to further enhance your visualizations in editors such as Adobe Illustrator or Figma.
I successfully downloaded a chart as an image, but it doesn’t fill the whole canvas. Why?
Prior to exporting, you are prompted to choose the file type as well as the dimensions of your image.
However, while the Size settings change the dimensions of your image, they do not change the width/height of your chart. Therefore, if you would like to adjust the size of your image (for example, for social media), first preview the visualization in the exact custom dimensions you would like it to export. Don’t worry if it’s too big in the editor – the image result will be just right!
Alternatively, you can add your chart to a Canva presentation, where you can easily resize and export your charts as images.
Last updated on July 27, 2023
HTML5 Canvas Export to High Quality Image Tutorial
If you need to export a stage as an image or as base64 then you can use the stage.toDataURL() or stage.toImage() methods.
By default in Konva , exported images have the pixelRatio attribute set to 1 . This means that if you export a stage with a size of 500×500 , then the exported image will have the same size of 500×500 .
In some cases you may want to export an image that is more suited to higher (or even smaller) resolutions. For instance, you may wish to export something as an image and then use that image on a canvas on HDPI devices (with a high pixel ratio, like a retina display). Another scenario may be that you need to export a user’s drawing onto a computer running a high resolution.
If you were to do this with the default settings, then you would see a blurred image. You can read more about the global pixelRatio attribute here MDN – devicePixelRatio.
For both of these use cases, you can use:
stage.toDataURL({
pixelRatio: 2 // or other value you need
})
Now, a stage with a size of 500×500 would be exported as an image with a size of 1000×1000 . Almost all nodes in Konva are stored as vector data, apart from bitmap images and cached nodes. This results in a high quality exported image.
Usage: try to save stage as an image. You will see that it has a high resolution.
html>
html>
head>
script src=“https://unpkg.com/[email protected]/konva.min.js”> script>
meta charset=“utf-8” />
title>Konva High Quality Export Demo title>
style>
body
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
>
#buttons
position: absolute;
top: 5px;
left: 10px;
>
#buttons > input
padding: 10px;
display: block;
margin-top: 5px;
>
style>
head>
body>
div id=“container”> div>
div id=“buttons”>button id=“save”>Save as image button> div>
script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage(
container: ‘container’,
width: width,
height: height,
>);
var layer = new Konva.Layer();
stage.add(layer);
var box = new Konva.Rect(
x: stage.width() / 2 – 50,
y: stage.height() / 2 – 25,
width: 100,
height: 50,
fill: ‘#00D2FF’,
stroke: ‘black’,
strokeWidth: 4,
draggable: true,
>);
layer.add(box);
var circle = new Konva.Circle(
x: stage.width() – 50,
y: stage.height() – 50,
radius: 50,
fill: ‘red’,
stroke: ‘black’,
strokeWidth: 4,
draggable: true,
>);
layer.add(circle);
// function from https://stackoverflow.com/a/15832662/512042
function downloadURI(uri, name)
var link = document.createElement(‘a’);
link.download = name;
link.href = uri;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
delete link;
>
document.getElementById(‘save’).addEventListener(
‘click’,
function ()
var dataURL = stage.toDataURL(< pixelRatio: 3 >);
downloadURI(dataURL, ‘stage.png’);
>,
false
);
script>
body>
html>
A Guide to Common Aspect Ratios, Image Sizes, and Photograph Sizes
Don’t know which size to use for your image or video? We’ve listed common aspect ratios to help you create your next project.
A Guide to Designing with Arrows
When you need to guide the eye, arrows lead the way! Learn all about arrows in graphic design—what they symbolize, how to use them, and more!
Tips for Designing Irresistible Black Friday Promotions
Need some eye-catching design tips for your Black Friday marketing campaign? We’ve got you covered with fresh ideas and stellar examples.
