polotno-project / polotno-studio Goto Github PK
View Code? Open in Web Editor NEWFree online Design Editor.
Home Page: https://studio.polotno.dev/
License: Other
Free online Design Editor.
Home Page: https://studio.polotno.dev/
License: Other
I would love to be able to create an image that has a transparent background so that when I download it, it doesn't have to be a photo or color as the background.
Hi Anton,
Trying to extend your editor with custom UX logic, and I find it quite challenging to add logic due to missing information about user actions. Would it be feasible to extend the event API in the following directions?:
This is caused by the CSS rule of 'overflow:auto;' on the 'css-bisco' class.
Resolving this requires overflow-y to be set to scroll on the child element (the one with the images) and overflow-y on the parent container to be set to hidden. The scrollbar is also under the color panel content and you can fix that by setting a CSS calc style on the child to be the full height minus the section with the colors.
Example:
Result after fixes:
You guys are using graphics from flaticon, iconfinder and iconscout right? How about the license? i mean, for example if we use flaticon's graphics with free account we must write the attribution, but i think the majority of polotno's user don't understand that the graphics are from those platform and they also don't know the license
I'm receiving json data in response to an api. This contains the image url and the template json. Images are flawlessly mapping on getPreview. However, the problem is that I want the image to act as a template on onSelect so that the user may group and ungroup the pieces inside. Is it possible to add a json to the Onselect so i can utilize it?
Here is my code:
<ImagesGrid
images={images}
getPreview={(image) => window.location.origin + '/' + image.image}
onSelect={async (image) => {
const altered = JSON.parse(image.template_json)
console.log("🚀 ~ file: TemplateLibrary.jsx ~ line 45 ~ onSelect={ ~ altered", altered)
const { width, height } = await getImageSize(window.location.origin + '/' + altered.template_json);
await store.activePage?.addElement({
type: "image",
src: window.location.origin + '/' + altered.template_json.pages[0].children, width, height,
x: pos ? pos.x : store.width / 2 - width / 2,
y: pos ? pos.y : store.height / 2 - height / 2,
});
store.loadJSON(altered)
}}
rowsNumber={2}
loadMore={true}
isLoading={isLoading}
/>
api response:
I am having trouble controlling the template state for different sizes in the Polotno editor.
I'm initially adjusting the style or placements of items in the design and choosing the size of the Instagram post (1080x1080 pixels). I then switched to a different size IG story (1080x1920 pixels) and made any necessary style or positioning adjustments. In this instance, the changes I made are no longer available if I return to the size of an Instagram post (1080x1080 pixels). It has been replaced by the latest adjustments made to various sizes.
So, is there a way to have distinct states for templates depending on the available sizes? Therefore, if we last saved changes for a certain change, we don't need to make changes repeatedly with different sizes.
https://codesandbox.io/s/github/polotno-project/polotno-site/tree/source/examples/polotno-grid?file=/src/index.js:112-180
This is the demo.
The exported image will contain grid elements. Is there any way to remove these auxiliary lines?
When I apply one or more effects on an image, followed by the Corner radius effect, the radius is not automatically applied to the image. For the image to actually have the radius applied, it takes toggling the first effect applied off and on again.
Example order of functions to replicate the issue:
This produces a grayscale image with sharp edges and rounded border inside the image itself:
When done in reverse order (Border, Corner radius, Grayscale), it works just fine, so it's an effect order related issue.
Perhaps this could be an option to select before saving, but like many people I have a lot of Polotno (#).png
files in my downloads folder that I have to rename. Would it be prudent to automagically create filenames on download?
For instance, if the text is "ACT NOW BEFORE THEY'RE GONE! $40 FOR 3 TICKETS!" then the file can be saved as act-now-before-theyre-gone-40-for-3-tickets.json
and act-now-before-theyre-gone-40-for-3-tickets.png
.
The Image is being loaded from S3 bucket [allowed for all domains], it's being shown on the custom sidepanel but not on the Canvas.
canvas error : "Can't load image"
I see you have no LICENSE file for this project. The default is copyright.
I would suggest releasing the code under the AGPL-3.0-or-later license so that others are encouraged to contribute changes back to your project.
I am facing trouble while working with images inside the bigger size template.
I am trying to create a template of size 7200 x 10800 (~ 24 x 36 Inches considering 300 DPI). When I am trying to load an image with the same dimensions inside it, it is not getting loaded correctly and gets flickered while changing its dimensions. In some cases: it just never gets loaded inside the editor.
Demo video of the issue: https://www.loom.com/share/e68f73daf69643f4ab4290dae138dd9f?sid=c2e61ccb-111c-4753-b893-55fc02ee9775
Let us know if we have any workaround for this.
Thanks!
How about export to svg ?
Hi,
Not able to save JSON by using the application via URL https://studio.polotno.dev/ on Edge browser on Windows 10.
Issue may have occurred within last 4-5 hours as I was able to save JSON before the time.
As there is no issue template, please let me know what are details are required for debuggingg the issue.
Thank you
I'm trying to create text effects, such as bevel or emboss.
With svg this is possible by constructing filter primitives. Those effects can then be used in html by referring to their IDs.
Any way to do this in Polotno?
Is it a way to add this function now?
This is needed as sometimes image generated from background remover(return rgba png) will have some unwanted pixels.
Add a context menu to the canvas, accessible via right-click, that offers copy functionality, layer ordering controls, and other relevant features.
index.js:32 Uncaught (in promise) DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'polotno-state' exceeded the quota
Hi Guys,
Got a problem to download the finished design.
I have 18 design to download but only 9 are saved into my computer!!!
design number 1-2-5-7-8-12-14.....
Do you have any idea where is that coming from?
This editor I would say really could be the best available - paid or otherwise, if it had one missing feature, the ability to put text on paths and curved text. Text features are really what separates the pro apps on a desktop and web editors. Text control such as being able to flow text around objects, adjust kerning, and text on a path etc are key elements to a professional design.
Great work! I look forward to watching this project grow.
Hi Anton, there is a project called Win11React that emulates a Windows 11 desktop shell. It also emulates the Windows App Store using iframes to wrap various open source projects.
I would like to submit Polotno Studio as an app to the Win11React App Store if it is OK with you.
When I group elements I can easily drag and resize them in the UI, but calling set()
on the group with x, y, width, or height has no effect.
Can the UI functionality be exposed to the API?
const index = DEFAULT_SECTIONS.findIndex(object =>{
return object.name === "templates"
})
DEFAULT_SECTIONS[index].name = "Laila"
I'm trying to change the default name of side panel tab from templates to sample templates. It is changed but not rendering as changed don't know what the issue is ?
is there any way to change the name of DEFAULT_SECTIONS
Ability to upload fonts. Not sure if I should write more, I'm not used to using GitHub. But it would be really nice to upload my own fonts, and I would definitely be using this if it could do that. Thank you
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.