Using node-imagemagick to 'crop' an image uploaded to S3 - node.js

I'm building functionality that allows users to upload an image, then crop it to a square (for profile pictures etc...)
Currently, the process works like this:
User selects image from hd
Image is uploaded to S3
S3 Path is sent back to view, and image with jCrop is shown
On submit button being clicked, my controller action gets the coords set above
Now I'd like to crop this image to the given coords (note- I'm using lpatters fork of node-imagemagick as it contains 'offset'
Unfortunately, .crop only accepts a path - which we don't have, since it's hosted on S3 at this point.
Is there any workaround?
I saw tmp, but this may be a little overkill?

What about using some of the other entry points such as "resize" that then allow you to provide the custom arguments? I'm using streams in this code: https://github.com/jeffwilcox/4th-cloud/blob/master/lib/webserver.js#L542

Related

Load image from JS to Phaser Game

I'm doing a custom game which I'd like to change the background and a character picture according to a file they upload.
The input file is outside phaser. If possible, I'd like to show the picture directly without uploading to the server.
If you use a file loader to get the base64 encoding of the image, you can use this.textures.addBase64 to load the image into the texture manager, after that loads you can create new objects with that image tag, or set existing images to that texture.
Working Example =>
https://stackblitz.com/edit/phaser-use-uploaded-image

Mapbox GL JS : Do large images overlay accurately - if so, how?

I feel like I have been stuck perpetually with this problem. I have a single geoTIF file of weather radar data that will not overlay on Mapbox correctly. The spatial area is of the entire US. It should be a simple task, but there seems to be some sort of weird distortion causing the overlay to not be correct, even though I am very certain my Mapbox coordinates in the linked HTML file below are correct and match the geoTIF.
I uploaded the geoTIF to a website called "geotiff.io" (which uses leaflet to show the files) and it renders the image perfectly, but I cannot emulate it using Mapbox. The storms always are off in Mapbox.
This is a link to my Mapbox map with the image overlay where it is incorrect
This is a dropbox link to a zip file with the geoTIF and colorization file, which I used gdaldem with
I would like to explain more, so it's simplified. Here is an image showing part of a storm that is out of place (left side) and how it is too far north. On the right side was a screenshot taken from geotiff.io - and how it's perfect. What is going on here?!
The geoTIF image was not set as a web mercator projection before being displayed in Mapbox. I assume the geotiff.io service corrected this automatically and made me think there was an issue with the code or Mapbox, when it was not.

Is there a way to make an image displayable in one website only?

I need to make a website with an private image inside of <img /> tag, which mean you cannot view it any where outside that website. I need the image to not be displayed even if the user try to copy the src of the image and open it in another tab of the same browser.
Is it possible? If so, how can i achieve that?
Short answer: no. Long answer: not possible :-)
If you can get at it in any way (and you must be able to do that to get it to render in a browser), you can save it locally.
All someone would have to do is access it with a munged copy of a browser that saves all incoming data to disk.
There are ways to obfuscate the image so that the user won't be able to just copy and paste the URL, you can use the Javascript Image object to create a new image and drawImage to draw it into a canvas, however you'll still need to obtain the image data somehow, perhaps making an ajax request for the actual image on the server. However a really persistent user can inspect your javascript code and do some reverse engineering to get the image source.
A more naive user will just take an screenshot of the image and achieve the same effect.
So any attempt to try to prevent the user from copying the image is futile.

Send path of SDWebImage stored image to a UIWebView

I need to be able to get a path to images that cached.
While I am wondering if there is a way to do this using SDWebImage, I could probably get away with just having the knowledge to return a path to an image stored in the cache so I can display it within a uiwebview inside an image tag.
According to this https://github.com/rs/SDWebImage/issues/25 it would seem you can simply refer to the image by it's original url and it will be correctly picked up from cache.

Web image display in iPhone app

I am new to developing on the iPhone so am sorry if this is an easy question, but it has had me stumped for a little while.
Basically the app displays data retrieved from an XML feed. In that feed is an element that contains the path to an image. eg http://www.myserver.com/myimage.jpeg.
I want to be able to display that image in the list view of my iPhone app.
Most importantly, I don't want to stop the list drawing for each image, the rest of the data should be displayed immediately and then each image downloads and displays as quickly as data speed etc make it available.
What is the best way of downloading that image and displaying it?
Ideally can someone point to some working example code.
Thanks
Stephen
Displaying the image: you could create a UIWebView and just point it to the path - and then it's fully zoomable too.
Displaying in the list view:
//Somehow download your image...
cell.image = Your Image

Resources