I am building a web application using Parse as my backend.
Part of the signup process involves the user uploading and cropping an image before I pass it along to my database (the picture is part of the user profile, similar to what you would do on Twitter).
I have figured out the uploading parts (both to the browser and then to the database), but I am not as confident with allowing the user to manipulate the image.
Most solutions involve using jCrop to achieve a result similar to the example here (although without the PHP).
Given that I am using Parse, is there a client-side solution that works better? How might a solution look?
Thanks!
Jesse
Basically I would go this way:
Load your image into a <canvas>
Crop the Image: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/
Save a image from the canvas: http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
Here is a very good tutorial.
Disclaimer: I haven't tested this yet, but I heard that this way work.
Also use background-size:cover; or background-size:contain; to get around nasty dimension problems.
You can able to crop an image using HTML canvas, but it involves lots of codes, Consider using Cropperjs, It's a pure javascript library for cropping images. Here client-side image cropping by cropperjs is the working example.
Related
I have a system build in PHP where I take a pdf and place it as a background and then on a second layer place text on top of it with coordinates. This makes that managing the two different parts are easy. Because the initial pdf is difficult to reproduce in html. So html2pdf is not an option. I tried it but because of all the different lines and sections and text the library cannot manage it.
Base PDF example
Because of reasons I am now looking to replicate this functionality in javascript. So I was wondering if something similar is possible in jsPDF. Or any other library.
After a long and tedious search I found that PDF-LIB is what I needed. They allow to pull in a existing pdf and alter it by writing ontop of it.
I did experience some issues with pulling in the pdf but that can be solved. It was mostly because of fetch() method. But they allow Base64 inport.
Is there any pure JavaScript way to reduce the quality to a specified size? For example if someone tries to upload a 12MP image is there any way to reduce this to 5MP for example? At the moment we are using Aurigma, but would like to get away from the reliance on a plugin that the user may or may not have.
SO recommended this post as a possible question/answer, but this seems to deal with cropping the image. I'm needing to reduce the size of the image client side. Is this something that is possible? Is there a plugin for jQuery that does this?
You try using the Plupload library. I have been using it for multiple file uploads, but never its PNG, JPEG resize capabilities.
There is a related question at Image resize before upload
First of all, I'm very new to javascript. I'm trying to develop a javascript function which takes an image and returns a cropped version of that image. By looking around on google I've found that I probably need to use a canvas in some way to accomplish this task. But does that mean I have to display the image on my page?
I've also looked at different javascript image processing libraries for a similar function, for example Pixastic's Crop, but I have no idea how to use it to solve my particular problem. So now I'm turning to you guys for help. Please guide me in the right direction!
Thanks!
Pixastic's Crop solution seems easy to implement and uses the canvas. It would do the job as long as you don't need to support Internet Explorer 7 or 8.
Otherwise, you can simply use CSS overflow:hidden; to do a client side cropping.
Pixastic Solution: http://www.pixastic.com/lib/docs/actions/crop/, check out the Example Code tab.
Here is a working example for Pixastic and the CSS solutions: http://jsfiddle.net/EB6P7/1/
I used the jQuery plugin for Pixastic.
--
If you don't need to save the image on the server side I recommand using the CSS solution as it doesn't rely on Javascript and achieve the same result as Pixastic.
If there's anything you don't understand, ask me as I don't know your level in HTML/CSS.
Well if your problem is only cropping and not saving the cropped image, the simplest solution I would say is to position the image using CSS inside a div and show only the cropped area.
If you want to save then I wish you need to use some library on the server side to crop and save
Maybe the CSS Clipping feature is a solution for you?
#someImage
{
clip:rect(50px 100px 130px auto);
}
For those unaware of TimThumb, it will take any image, of any size or dimension and create a thumbnail on the fly to any desired size. The beauty of it is that it really works on any dimension you feed it through a combination of either resizing the image, cropping or zoom cropping the image.
Ive been searching for jscript equvalents but they either require the user to actually mask out the thumbs manually (looking for a script that automatically does it to images) or the scripts can't handle images in a different aspect ratio.
Thanks for any leads on this!
It is impossible to do this only with client-side javascript. PHP has GD, ImageMagick libraries which create the new image (actual thumbnail) and javascript alone can't do this, as it is client side script, it can't create files.
So the answer is: There is no any.
As #papirtiger pointed out you can still do it with server-side javascript (such as node.js).
Please see this link
It depends.
You can use CSS or Javascript for simple image scaling.
There are tons of available plugins to this.
I doubt that there is one that does the guesstimation exactly the same as timthumb.
If you are going resize a large amount images on the page it will really hurt performance.
Another alternative is to several fixed size "layouts" (960, 320) etc and have the server generate thumbs for each.
You can than use javascript to load the appriate size.
If you really need to rescale the file:
Use external webservice to resize the image.
Most of them take a url and return a resized image:
example.com/resize?image="http://example.com/image1.jpg"&height="...
If you have TimThumb running on your server you can set up a simple API to allow you to call your own service.
othrwise see Image resizing web service for a few alternatives.
I'm trying to build an interface for the user, so he can choose or pick colored eyes, skin, etc., of a model. I'm really on my way with divs and CSS. I'm using Ajax for loading images into the divs.
My problem is that I need to offer a option to the user so he can save the image as a JPEG or PNG file.
Looking around, I found canvas HTML5 stuff on Stack Overflow, but it's not compatible with Internet Explorer,
Create an Image of a DIV in JavaScript (GIF/PNG)
How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?
I need help to find something compatible with all browsers.
I also found this JavaScript code:
button = document.createElement("img");
button.src = "http://example.com/livechart.gif?interval=15"
But I don't know much about the createElement method.
I know CSS, but JavaScript is beyond my knowledge.
You cannot do this on the browser, you must do it on the server.
see: Convert web page to image
You want to take screenshot of the browser? Well, there are lot of ways you could try, but all of them would be browser-specific. The most reliable would be to just tell the user to make a screenshot with the OS. On a Mac it's Command-Shift-4, then space; on a PC, it it's ALT-PrtScr, I think.
I believe you could do that with HTML canvas and some JavaScript: Canvas2Image : Saving Canvas data to image file.