I've got a question. So I would like to make a web app that does this:
allows user to select an image from his file system
using a crop tool, select an area of the image that the user would like to crop
preview the crop
save the cropped image
I have tried 2 approaches: the first one was to use HTML5 canvas. After a lot of finagling, I was able to select an image, crop it (crop tool coordinates are saved and the image is processed server side), preview it and submit it.
But I had problems if I selected an image, cropped it, then chose to select another image and try cropping that. The previous image selection was messing with the new one.
The second approach was to use JCrop. Using two example that were included on their website, I was able to use a crop tool to select an area, preview the crop in real time, and save the crop tool coordinates.
But the problem here was that I can't use a user-uploaded image; the image url is hard coded in the img tag. When I tried to implement a solution that took a user's selection, the image never came up.
So does anyone have a solution to these problems, or is aware of another technology that does what I need without any of the above issues? Please let me know. Thank you.
I've developed a Jquery plugin that does exactly what you want: it selects an image (or drag and drop it), lets you preview it and preview cropping area, change selected image and upload it. For cropping image, my plugin includes JCrop.
Plus, it validates files (max KB, extension, image min size, etc.), allows you select multiple files and style button. It accepts several options.
You'll find DEMO, documentation and download link here: Jquery Custom Input File Plugin
You can do something like this. Markup:
<form id="your-form" action="process_form.php">
<input id="your-input-file" name="your-input-file">
<input type="submit" value="Upload file">
</form>
When document is ready:
$('#your-input-file').customFile({
type : 'image',
image : {
crop : true,
cropSize: [300,200], // width and height of result
maxSize : [1080,720] // if you want to set up a maximum value for original images
},
maxKBperFile : 500,
multiple: false // when you select or drop a new image, this one replaces previous one
//More options...
});
//And upload form:
$('#your-form').submit(function(e){
e.preventDefault();
$.customFile.ajax('#your-form', {
success : function(response){
console.log(response)
}
})
});
Related
I've been creating a blog website. All post images should be 800x800 resolution. On the admin page, when the author uploading image to post, if he/she will try to upload a bigger than 800x800 resolution, I want to show an alert to an author like a bootstrap danger alert. How can I do it?
Before
After
Not completely sure, but try creating it using URL.createObjectURL() (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL, How to make a simple image upload using Javascript/HTML), don't alter the image dimensions using css, insert the image into the page, and just get the image width and height.
I am using a theme which uses Dropdown.js to upload files.
The JS file is over 1000 Lines and I feel a bit lost.
What I am trying to achieve is that I have a container where you drop a file. I want that when you choose an image the image will appear as a preview in the same container. Right now when I upload an image the preview is a small 100x100 picture. I want it to fill out the whole content and be able to upload 1 image only.
I am not able to achieve it as I am pretty new and the big js file is confusing me. If someone can point me in the right direction it would be great.
You are searching in the wrong file, your js controls the user experience. You need to work in the css of the dropzone, and add a width auto, height auto. Now to upload only one file that goes in you specifications of your dropzone, max-file: 1.
Check the documentation.
https://www.dropzonejs.com/
Well, I'm try to customize the style of Cloudinary Upload Widget:
http://cloudinary.com/documentation/upload_widget
I want to apply the correct css for limit the image/canvas of the image preview during the progress.
Try to upload an image on the above page to see how it works.
During the upload, a preview is displayed:
Screenshot
I want to limit the width/height of the above image preview and whole loading bar. How? What's the css selector?
Maybe .image_holder or .thumbnail_inner but it's hard to tell, as there's half a dozen elements there. After you opened the image simply rightclick it and select "inspect element" or something similar.
The widget is only changing some elements during actual upload so you should be able to get a proper selector.
I'm trying to build my first ever Chrome extension, and want it to take screenshots. I know Chrome has a captureVisibleTab API to get the visible area of the screen. I have gotten that to work. But, I want to be able to take partial screenshots (eg. user clicks and drags the mouse on the screen to select a certain rectangular area of content). How would this work on Chrome? I don't see an API for this, but I know Awesome Screenshot and some other screenshot extensions do this.
I am using .mouseup and .mousedown to detect mouse clicks and event.pageX and event.pageY to get coordinates on the page. But, how do I get a rectangle to show up on the page? I have to convert the webpage to a canvas, but I'm not quite sure how to do that. Also, once I get the selected area, how do I convert that to an image and get the dataURI like the return value that the chrome API gives?
Should I be doing this some other way instead? Thanks for your help!
I would suggest first generating the overall screenshot (example for others), then cropping it later based off of the user data you collected. You can crop the image using JavaScript and the HTML5 <canvas> element. (example code)
As for converting the webpage to a <canvas> element, take an initial screenshot, display it on the canvas using the drawImage() function.
Then, you could use either the method shown in the "example code", or a library such as cropper to draw the rectangle on screen for the UI.
The example code can also show you how to turn the selected area into a dataURI.
I am trying to protect my website content by putting scripts to deny the right click and to see the source code in the browsers. But this is not sufficient. I want to know how to watermark only the original file and not the image that is seen on the webpage.
For example, an image that users can see on the web without watermark and when they click right and select "Open image in a new tab" they go to "website.com/image.png" and they see the watermarked image.
Is this possible?
P.S.: Sorry for my bad English, I'm not a good writer.
Thanks
Serving users a image which is not watermarked is not a good idea because they can download it easily so the best way will be watermark every images and render it users by slicing it. Slice the image and show only the image and hide the water mark and whey they will open it in new window full image will be loaded with the water mark
For creating Watermark on the fly with php
http://www.developphp.com/view.php?tid=1147
And for slicing image i don't know how to do that but i know it is possible but there are many ways to do it like you can zoom it to hide watermarks.
First of all, this will not stop them from downloading the image without watermark, because they can disable javascript, or simply right click on the image and save it right there, or the worst: simply do a print screen and save it to paint then crop it. Probably the best option is to have watermark on all of your images, on the website and on the direct access.