github / image-crop-element Goto Github PK
View Code? Open in Web Editor NEWA custom element for cropping a square image. Returns x, y, width, and height.
Home Page: https://github.github.io/image-crop-element/examples/
License: MIT License
A custom element for cropping a square image. Returns x, y, width, and height.
Home Page: https://github.github.io/image-crop-element/examples/
License: MIT License
This may be a known issue with the example page. If it's not worth fixing please feel free to close. At first I thought there was something wrong with the component but it only manifests when the image crop inputs are visible- the updateDimensions logic doesn't account for the height offset they cause.
If you goto the demo page https://github.github.io/image-crop-element/examples/ and turn on chrome mobile view, you can't drag the cropper around to crop the image.
It looks like <image-crop>
is using the old Custom Elements v0 API. This version was only implemented by Chrome. We should move to the new v1 API. That should make things start working in Safari.
It will look more like:
class ImageCropElement extends HTMLElement {
constructor() {
// ...
}
connectedCallback() {
// ...
}
}
window.customElements.define('image-crop', ImageCropElement)
https://developers.google.com/web/fundamentals/web-components/customelements
On mobile devices, it's a bit hard to crop the image by moving the circle anchors. We should implement "pinch to zoom" or some other functionality to make this easier for touch users.
The component works great, but I'd like to be able to set a custom aspect ratio for the crop. This is currently not possible, right? Or am I missing an option?
https://muan.github.io/image-crop-element/
=> https://github.github.io/image-crop-element/
Any thoughts on adding some part markup to make the component more styleable?
Demo, recorded against https://github.github.io/image-crop-element/examples/
It's possible to get into a state where you can see the edge of the shaded area.
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.