A simple, powerful and fully configurable image editor for web browsers and servers. Optional UI included.
Home Page: https://chrishutchinson.github.io/cardkit
License: MIT License
The theme for use on www.chrishutchinson.me.
Should definitely do this for the next release
It might be good to be able to rotate layers, and have that as an editable property.
For files nested inside multiple folders, a file nav dialogue window would probably be easier
I have tested locally & it's working but what is the proper procedure to deploy it on a test/production server?
Also is there a way to display the previously generated images in sort of gallery?
Wonderful project and appreciate the easy config object(s).
The fork-as-deploy/install is limiting though. It makes it hard to config, override, and then upgrade the code base. Any changes I make to my fork might cause merge errors later.
It would be really nice if this was an installable library, where one would include the library (JS/CSS) on the page, then a bit of JS to instantiate and configure.
<html><body><script>var cardkit = new CardKit({ config: 'here' }); </script></body></html>This would mean cardkit could be maintained in bower or npm and managed like any other dependency.
Along with building a more visual layout for selecting filters, allow filters to be mixed / combined (e.g. blur and grayscale etc.)
Would be even better to be able to define the order of the layers in the config!
I tried CardKit v1 in the past, and am now checking out v2.
In the old system, I set up multiple theme objects in themes.config.json, each with its own logo. So, one might be "Logo normal", another might be "Logo white on transparent", etc. (I included the logos as base64 PNG data in the json)
But in v2, I don't really understand the distinctions between "layers", "layouts", and "themes".
What I'd like to do is to create several themes (to use v1 terminology), each with a different logo and color scheme. Or, failing that, maybe a drop-down select list that would let users choose between several logo options.
The remove image option is not working. Tested in chrome as well as Firefox. (both latest) . I checked the demo version (http://times.github.io/cardkit/) that too was not working.
Getting the following error after running grunt serve on Windows 10
(node:7524) DeprecationWarning: process.EventEmitter is deprecated. Use require('events') instead.
Have tried the fix suggested in LearnBoost/websocket.io#55, but doesn't seem to have any effect. Any ideas?
(I know this is probably low priority with v2 on the way, but any pointers would be appreciated - however obvious they may seem to you.)
Also getting stylus-type-utils was not injected in your file. error, but that looks possibly easier to fix
Add a save button to export the created SVG as a PNG
Hi! first of all, CardKit is awesome, so thank you for this fantastic tool!
I was wondering if it would be possible to implement basic markdown support for text fields, something like Meme from Vox Media.
@chrishutchinson, thank you so much for this! My company will need to generate templated assets and this is exactly what we needed! 👍
I understand that this is a complex issue and have a good idea of what all it entails, but I was curious if you had given any thought to handling images when the originating device is a retina display. Perhaps, the library could depend on Modernizr (optionally) and output images scaled according to the user's originating device. Granted, the bridge from Retina => Standard resolution is always going to throw people off. Right now, when I create an image on a Retina device and save it, opening it later in Photoshop produces a 1/2 sized image. I'm only speaking from the perspective of user's who don't understand the moving parts under the hood. For me, I plan to integrate in such a way that the images will be streamed via base64 data blob upload to my backend. It would be great to have the library configurable to send the x2 (retina) resolution image to my backend, where I can then create two assets by scaling down, rather than stretching the image and scaling the smaller one up.
Does that make sense? Have you given any thought to it? I might be able to lend a hand if we can agree on a good approach and exactly how the feature might work. Cheers!
Just observed the Font-awesome fonts are not showing up. It used to work yesterday.
Is there a way to smart-ify quote marks when users are typing into text fields?
Hi, Thank you for the nice tool.
[environment]
[specification]
[issue]
If logo is mousedown-ed and mouseup-ed outside logo by moving the cursor horizontally,
the svg rect is not removed and this results in inifinite proliferation of the rect
Yeah, that's probably pretty important.
So not quite an embed code, but the generated SVG code has all styles / fonts etc inlined, so can be directly embedded into a page.
The ability to reveal this code should be offered for those who want it.
Hi, really loving Cardkit and really nice to see how much easier it's gotten to configure all the things.
Just one thing I'm missing: it's be super great if I could specify a dropdown list of image sources/sizes just like I can for the fontsize of text elements.
The reason is that while a certain theme (corresponding to a brand the way we use Cardkit) will mostly be used with a certain logo, this could occasionally change. For instance, because a black and white logo of that brand would fit better with the background image.
Right now, as I understand it, I'm supposed to either duplicate the theme in themes.config,json for every combination or ask users to upload images themselves. None of those options is really ideal.
Good suggestion from @Aendrew that CardKit could be used for creating video preview images. Add default 16:9 and 4:3 card sizes to the gh-pages build.
Also update readme and roadmap.
Hey,
I was just wondering if CardKit was supporting any type of compression ?
Is the image issued compressed, or is it an additional step to take ?
Thanks a lot !
We're currently sitting at 42%, with the majority of the core, server and DOM libraries covered. However most of the React UI code is not covered, and would help us improve overall coverage.
Woops
As SVG <text> elements are terrible at wrapping, we may need to implement custom logic to auto-wrap text. We currently use rvg.js to do our SVG rendering, we this change may have to be part of that package, rather than part of CardKit itself.
CardKit v1 had the ability to add / configure SVG filters. Adding this into CardKit 2 would be a valuable addition.
In CardKit v1 only one filter could be applied at a time, but it would be good if multiple filters could be layered on top of each other.
Add an additional download method for SVG so it can be opened in Illustrator.
(There will be some font issues that need to be looked at)
Use angular-translate to enable internationalisation
Snap.svg has some nice filters, would be good to allow those to be editable (e.g. sepia, saturation, blur etc.)
Perhaps some kind of font config file, where you can define URLs etc.
Requires fonts to be base64 encoded, so maybe that can be automatically done for those included in this config file too?
Requires more research.
We've got 1.1.0 running, and everything had been fine. On May 17, I tweaked the themes JSON just to reorder the entries. The file still validates. The server hasn't changed.
Now we're starting to get problems, at least mostly in Chrome, though a coworker says in Firefox. My Chrome was acting up. I get a message in the download bar:
download
Failed - Network error
This is happening on my default image, which is for Facebook at 600x315 at 2x or 3x scale. It also seems to be happening on other photo sizes at 2x or 3x. My temporary fix was to build a default at 1200x630 1x, which works just fine.
I get no console errors. Chrome developer tools show three files moving: JPG, PNG, SVG + xml ... And I get the same sorta three files for actual downloads and that "Failed - Network error."
Any ideas?
In CardKit v1.x the draggable property could be configured to support locking on the X or Y axes. This is currently not implemented in CardKit 2.
Potential implementation in the configuration object:
draggable: {
x: true,
y: false
}
If, for example, due to a resize using the size control, an element is now located off the canvas, turn overflow: hidden off on the SVG to reveal this and other hidden elements, allowing them to, potentially, be dragged back into view.
A checkbox in the 'Configuration' box should suffice, perhaps hidden away under an 'Advanced' toggle, as most users won't need that.
Add a sizes object to control the canvas size through drop down, e.g:
sizes = [
{
name: 'Facebook',
width: 600,
height: 380,
},
{
name: 'Twitter',
width: 620,
height: 340,
}
];
There's also possibly a requirement for a flexible canvas size using a range input.
Need to do that whole pinning process better, it sucks right now
Over the past few weeks we've been working on a major update to CardKit, version 2.
CardKit 2 will bring a range of new features, most notably:
You can find out more about all these features here: https://medium.com/digital-times/cardkit-2-d3dc1d06005#.c48hwcdcd
We'll be creating a new branch in the coming days that will allow developers a chance to try out CardKit 2.
If you have any questions, please log them as issues using the cardkit-2 label.
It would be really useful to be able to configure the elements that make up a card (currently stored in main.js). For example, the demo GIF shows a "name" element that isn't included in the app by default. That would need to be added to elements in main.js, right?
It would also be useful to be able to create predefined sets of elements for different types of cards: quote cards, photo watermarks, etc. The user could then select a "type" of card to bring up different sets of elements.
Would you accept a pull request for this sort of functionality?
Thanks very much for creating and open-sourcing CardKit! It's a fantastic tool.
For those that don't have node, bower, or would rather not compile their own version, we should include a pre-compiled version in the repo with easy configuration options if possible.
Kind of important so people can actually do their own builds
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.