greenimp / canvas-frame Goto Github PK
View Code? Open in Web Editor NEWHTML5 canvas-based Frame renderer, for dynamically creating picture frames around images.
License: MIT License
HTML5 canvas-based Frame renderer, for dynamically creating picture frames around images.
License: MIT License
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Allow the mount to have a background image, rather than colour.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
There is a bug that causes the slip/frame to sometimes not be drawn.
See the issue created at Mage Frame for full information: https://bitbucket.org/GreenImp/mage-frame/issue/8/slip-drawing-bug
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
The frame looks very flat.
Some depth should be added by adding things such as shading around the mount layers, drop shadows on the frame rim etc.
I suppose no #11 comes under part this.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
The context menu for the canvas (with the 'Save' button) seems to get duplicated each time the canvas init function is called.
There needs to be a check to stop it from being created if it already exists.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
If a row has only one image, it is centred in the row.
It may also look nicer to centre the rows themselves, so that when we have multiple rows, the images are all centre aligned with one-another.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Padding between images should be customisable, allowing the user to specify a row and column padding, as two separate values.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Due to photo padding/border.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
When drawing the frames/slips, if the computed height of the frame/slip equals to 1, then an infinite loop is created.
This is because we loop down each side of the canvas, drawing the frame/slip as we go, with a -1 offset; so, if height is 1, then it always draws over itself and never reaches the end.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Padding around the photos doesn't seem to be calculated correctly. There is more vertical padding than horizontal, whereas these should be the same.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Photos need to be positioned correctly within the frame.
Currently they are are centered, which is fine if only one photo is used, but for multiple photos we need to determine where to place each one relative to its row and the width of other photos on the row.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Canvas isn't supported in IE < 9.
There are several JS/flash based fixes for this, which will need to be tested.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
I need to enable frame 'slips' (an inner frame).
This will be an optional thing and will work in exactly the same way as the frame rim, allowing an image to be specified, along with thickness etc.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
There is a visible gap between the frame rim and the slip.
This is apparent at pretty much every size. Possibly due to the percentage scaling of the frame, to make it fit the canvas. I assume that it is slightly off, due to the amounts coming to a decimal point of a pixel.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
We may have to enable multiple mounts, layered on top of each other.
These would be visible around the images in a 'step' fashion, with a customisable gap between each layer.
I'm not sure if this is required or not, so will wait before implementing.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
I need to add some depth to the frame.
Using css drop-shadow on the canvas element doesn't seem too feasible, as the frame doesn't always take up the exact size of the canvas.
I could potentially draw the drop-shadow on the canvas, but then it will take up canvas space and extra processing time.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
We need to implement a built in zoom/view larger function, to allow the user to click on the canvas and have it display a full-sized version of it.
This could utilise fancybox (or similar) with a fallback of a simple JS pop-up (horrible, but could work) - or perhaps simply opening it in a new window?
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
When saving the canvas to PNG it keeps all of the whitespace around the frame, if the canvas is larger than the frame.
I'm not too bothered about it, but it would be good to look into any possible solution to this, if one exists. It may not be fixable.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
Mount background image needs to scale proportionally to the frame.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
It would look nicer if images within the frame were vertically centred against other images in the same row.
This may actually be a requirement, depending on how the client cuts their mounts.
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
We need to allow the mount border to be different on each side on the frame.
For example;
border = {
top:50,
bottom:150,
left:15,
right:15
}
Originally reported by: Lee Langley (Bitbucket: LeeLangleyRees, GitHub: Unknown)
The frame width (width of the actual frame rim, not the entire thing), needs to be relative to the chosen frame thickness (ie; 1inch = 10px). That way, we can relatively resize the frame.
Perhaps using a scale, rather than inch:pixel ratio, so that everything always fits on the canvas.
Or perhaps both.
Basically, frame rim width needs to visually correspond to the actual width of the frame. At the same time, the frame should take up the entire width/height of the canvas (without getting cropped), so it will need to shrink/grow to fit proportionally.
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.