To make it even easier to work with user content, we enable image post-processing. This way, regardless of what type of file a user uploads from the Cloud or their local device, you can be sure it's in exactly the right size. To convert an image, take the filepicker url and append /convert, along with query parameters specifying what you want to change. See the Docs»
filepicker.io shows an example of a cropping tool on their front page. Could that be built into the picker itself?
We've discussed building it into the upload experience a la iOS, but think that the functionality is best done as a step after the upload. The demo on our front page is done using JCrop, and at some point we'll open-source the demo as a jquery plugin or similar.
Related
I'm attempting to get an array of pixels of the screen (web page) but i know of no way of doing that without using canvas (either straight-up or converting HTML dom elements into canvas, first). I need to capture every pixel on the screen and i don't know what operating system is going to be used so i can't request the display from the O/S, either. Is there a third-party tool, possibly, or a way to do this from the window object in the DOM?
I have only one idea. Maybe you should try to move this functionality to the server. You can use WkHtmlToPDF(http://wkhtmltopdf.org/) for saving websites as PDF, pdf file you can convert to an image and read pixels array.
As web developers with no control of the client machine, there's two approaches to getting a screenshot of a webpage:
Open the webpage in a headless browser on the server and make the screenshot there. phantomjs is a popular one.
(I'm including this for completeness, though you said you don't want to take that route): Use the canvas element on the client. html2canvas is an interesting project that re-renders an entire HTML document into a canvas element so a screenshot can be made.
If your use case allows it, you could of course instruct your users to take a screenshot and paste it in an upload form that can handle images from the clipboard. On Windows, that's a matter of hitting "Print Screen" and CTRL+V.
Here is an api to generate images from online web pages: http://www.page2images.com/Create-Website-Screenshot-with-Javascript-API
I use filepicker to serve resized / cropped / watermarked images on a website. I use the regular URL based API to do this: e.g. a url might look like https://.../convert?h=400&w=600&fit=crop&quality=80&format=jpg&cache=true
This obviously allows a lot of flexibility for sizing images on the fly and so on. However, it also means that anyone can get the original un-cropped, un-watermarked image by removing the parameters at the end of the URL.
Is there any way around this short of creating a proxy server that could un-encode an encoded string?
For the latest version, it seems you need to add in your API key to the URL as well - what would stop someone else from using my API key? Are these URLs really meant to be used on a production website in the <img> tags? or for creating a resized image to download, store and ultimately serve up to the end user?
We have updated our processing engine so that it is no longer necessary to pass an API key if you are transforming an image based on its Filestack Handle:
https://process.filestackapi.com/watermark=file:ZoVdwbe6Qcu9uIxIZSuU/h2T4Jl9RBSSXOGtl0gv8
However, a user could still get the image without the watermark. So, we also have a store method built into the processing engine:
Posting the image with our store task attached:
curl -X POST -g "https://process.filestackapi.com/store/watermark=file:ZoVdwbe6Qcu9uIxIZSuU/h2T4Jl9RBSSXOGtl0gv8"
Will return the following:
{"filename":"photo-1435771112039-1e5b2bcad966.jpg","height":750,"size":67588,"type":"image/jpeg","url":"https://cdn.filestackcontent.com/62aWdbPvQzWNrl90C7q9","width":1000}
Which is a saved version of the watermarked image, so the watermark cannot be removed:
https://cdn.filestackcontent.com/62aWdbPvQzWNrl90C7q9
We recommend using the newer method but you should also set up security so that people can't hotlinking to your content.
https://www.filepicker.com/docs/security/
I would also recommend move over to Filestack as it we have rebuilt all the infrastructure.
I am onto a photo project. Dynamically added a watermark in the large picture preview. But someone with general idea can manipulate the link and get the original picture. Disabling Right button seems to be useless. In this case what can be the appropriate solution?
Disable any access to original pictures. Make server script that receives picture's ID (or name) and sets watermark before picture will be shown. And make your application such way that this script only can access images by users. If manipulation with link allows users to have unauthorized access, then it looks like you have problems with architecture of project.
We're currently working with Filepicker.io to allow users the ability to upload both images and videos. It appears that if we specify image conversions in the Javascript API options, video uploads don't process and instead get stuck at 99.30%. If I remove the 'conversions' option, video uploads process without issue. Is it not possible to specify image conversion options and accept both type of uploads? If so, this should really be specified in the docs.
I attached a JSFiddle with the code in question. http://jsfiddle.net/BYkD4/
It might be an issue on our end, taking a look now. For large files (+1Mb) we split the file into chunks, upload them in parallel, and then reassemble them on the server side. We use browser progress up to the 90% mark, after which we have to "best guess" what the server-side progress looks like, for now at least. That's the reason why it's hanging at 99.30% - it may actually be able to complete if you give it enough time.
In any case, looking into it
Edit: looks like this was an issue on our end. Fix deployed, everything should be working fine. Sorry about the issue
i am making an app in which i have to upload an image/video file to the server...i want to know what things i needed to do this..?and i also have to show the progress bar while image is uploading...how can i do this..?
can you write some code snippet on how to upload file to server...?
If you are using http to transfer files.Allseeing-i have a great api for this called ASIHTTPRequest, its feature rich, well documented, easy to use and it supports file transfer tracking.
They have code examples and a description on how to include it in your projects.