fengyuanchen / photo-editor Goto Github PK
View Code? Open in Web Editor NEWA simple photo editing application.
Home Page: https://fengyuanchen.github.io/photo-editor
License: MIT License
A simple photo editing application.
Home Page: https://fengyuanchen.github.io/photo-editor
License: MIT License
Your example is much more difficult than it should be to learn from, because it's checked in minified, and relies on vue, which many of your users won't know
Have you considered giving an example in vanilla that isn't minified, so we can work with it in the debugger directly, and not guess what the one-character variables are, what $broadcast
does, etc?
Thanks for considering it.
Hi, I am a graphic designer, I want to help others in graphic design.
After I reviewed your project, you have no logo on this project. Therefore I want to contribute to this project by creating a new logo / icon. what do you think?
Hi.
your photo-editor is great.
I found a bug after manipulating the image and clicking the check button "OK (Enter)", the download button does not appear.
Tested on Win 7 (German)
on https://fengyuanchen.github.io/photo-editor/
with IE Version 11.0.9600.18349 (Update 11.0.32 - KB3160005)
Dirk
I want to open a base64 string png file in the editor from app.vue directly, but I am facing problems, as I am a beginner in vue.js
Please help me in solving the issue!
I want to upload the processed image i know it's base_64 encoded but i can't find any function on download button click please help me to find the function which is working only on download button @fengyuanchen
目前viewerjs里需要增加一个“截图”按钮,尝试了一下viewerjs 的toolbar里自定义按钮置入cropperjs截图功能,做一个类似photo-editor的功能。photo-editor很好,但是没有类似viewerjs的缩略图列表,而是一张张的上传。请问您能提供思路吗
This is a great idea very pleased I found it. Currenty I am unable to find it the npm to install.
Could this be added?
Hello,
How can I create cropper size respective to the original image width and height?
I'm testing photo-editor
but I don't see the way to load the photo in its original size. It always load the image to match the height of the screen.
有个小问题,就是裁剪大小后,操作工具栏就不见了!
Just wondering if this supports mobile devices?
hi
know I can get image as blob after make any crop to the image , but I want to take image as blob without cropping it.
Thanks
Maher
This :
<div class="canvas">
<div class="editor"></div>
<div class="toolbar"></div>
</div>
to like this (to free move aniwhere in site):
<div class="toolbar"></div>
<div class="canvas">
<div class="editor"></div>
</div>
I have a question. Could I create a drop by code?
For example call function named drop(int top, int width, int height)
<nav class="nav" @click="click" >
<button type="button" class="nav__button nav__button--success" data-action="" title="测试" ><span class="fa fa-check"></span></button>
</nav
click({ target }) {
const action = target.getAttribute("data-action") || target.parentElement.getAttribute("data-action");
console.log('traget',action);
if (action) {
this.$emit("change", action);
}
}
点击一下,会触发多次,有时一次,有时二次...
裁剪完成之后,我发现点击裁剪完成的那个对勾按钮是在navbar组件里面的,这个按钮的this.$refs.editor.crop()我看不懂是怎么来的。我想把这个对勾按钮的功能和裁剪按钮放在同一个地方,不知道应该怎么转换这个this.$refs.editor,能帮忙说一下嘛~
please add the mouse-up event(Default- disabled) to crop the image just like pressing 'enter'. This way bulk work can be easier.
Hi fengyuanchen , I wanna ask you how I can make the select aria fixed ? like facebook when you upload an profile picture , same issue ? thanks
Can you please provide the complete app.js. At present it is minified with the source code.
Regards
How would I go about setting the:
after the image was loaded?
can I save the photo edited by users by clicking somewhere?
there is api for this?
Hi !
this is great stuff here :) Nice job !
I am currently developing a website with Vue.js and I saw that you used it in this project.
Would you consider trying to make a Vue.js component so that the community would use Cropper easily ?!
That would be awesome !
Best regards.
如何控制加载的图片,不被缩放原图显示?
hi
after i upload my image the src of image is like this :
blob:http://academicprogs.iugaza.edu/e6475d62-18dc-419d-adec-7719c10de1d3
i can get this src, but how can i save it to then server or getbase64 of this src.
any help please.
thanks
maher
The user is forced to take a picture on iOS. Remove the capture:"" thing in the script found at https://github.com/fengyuanchen/photo-editor/blob/master/dist/app.js
Or just remove the capture attribute on the input element(s).
As title said, i'd like to know if there are something related to that. otherwise I will add it and create a pr.
thanks.
Hi, is there a way to show the dimensions of cropped area?
Thanks!
scenario:
load image
rotate 90
flip horizontal
result:
flips vertical
Hi
Can you please provide me any example of how i can use replace function.i want to load existing image.
thanks!
Hello,
I appreciate the work done on this impressive project. As someone relatively new to advanced JavaScript libraries, I'm seeking guidance on running the index.html file from the src folder. Currently, upon running the index.html file (from the src folder), only a blank page is displayed.
My goal is to comprehend the codebase and subsequently customize it to suit my requirements. While I recognize that my question might be basic, I would greatly appreciate your assistance as I embark on this initial phase of exploration and learning.
Thank you for your support.
const action = target.dataset.action || target.parentNode.dataset.action;
这一行会出现下面的异常,在IE10下
Unable to get property 'action' of undefined or null reference
To make changes to the html code, me need to edit the file main.js?
i.e. Is there a way that I can pre-load an image from the current server?
Hi, I am a graphic designer, I want to help others in graphic design.
After I reviewed your project, you have no logo on this project. Therefore I want to contribute to this project by creating a new logo / icon. what do you think?
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.