I'm trying to implement storing of the focal point of a jpeg photo using JavaScript. I'm basing my work on a neat css trick I recently talked about here.
My plan is to pair this technique up with a separate JavaScript upload and cropping tool (like Croppie) and save the jpeg data to Amazon S3.
What I'm hoping to achieve is to store the x & y focal point values within the jpeg metadata to save having to do a database lookup.
I'll then read these values back out when displaying the image and inline the css background position styles to ensure that the image scales appropriately across different devices.
I've had a look around online and I can't find any easy way to encode this using JavaScript. Does anyone have any suggestions as to how I should approach this?
Assuming you're using browser to run javascript. Use readAsArrayBuffer to read the buffer. Look for the APP1 section and modify it to add your custom metadata, and then save the image. How to access JPEG EXIF in browser?
ExifTool can write the metadata. Use Node.js child process to call the program.
If possible, using a database system or an index to store the corresponding information is a quick and easy solution.
Related
I have made a sketch in p5.js which the user can manipulate in ways such as creating shapes and dragging them across the screen and controlling a slider. I was wondering if there was a way to insert things like the x and y coordinates of the shapes, their heights and widths, and the position of the scrollbar into a database in MySQL so that I could make a fully functioning site where users can create their sketches, save them and modify them.
I have tried using a JSON file but I have realized that I cannot modify JSON files using p5.js so a user would not be able to modify their sketches and save the changes. I have also searched the web for solutions to this problem but nothing seems to come up.
To interact with a database, you're going to need to run server-side code.
Your P5.js sketch (which is client-side code) would send a request to your server, and your server would store the data in a database.
There are many many many ways to write server code, and listing them all here would not be feasible. Instead, I recommend you start by trying out a few different options: PHP was listed, but there are also Java servers (using JavaEE) and JavaScript servers (using node.js).
Shameless self-promotion:
Here is a tutorial on client-server communication, specifically JavaScript and Java servlets.
Here is a repo that contains a P5.js sketch that stores data in Datastore.
I'm honestly not sure if this is even possible, but after a few days of digging around on existing posts without yet finding a solution, I figured I'd ask the community here.
I'm developing a new frontend for a community-style website where users can upload their own posts, including images. Images are uploaded directly to an AWS S3 storage bucket, and then the source URL is stored in a database.
The previous development team did not use any sort of image optimization on initial upload, so when I'm receiving the S3 source URLs from our backend, the image size can range from small (300px widths) to massive (5000px widths). As a result, the frontend's feed of user posts has intermittent loading times as the browser takes time to load these massive images in the feed.
I'm wondering if there's any way I can do some nifty work to "resize" or otherwise optimize an image using only the source URL. From what I understand, in most cases I'd need the original file for any size optimizations, but maybe someone here knows a trick I'm overlooking.
I've attempted to take the source URLs and create a canvas that holds a down-stepped version of the original image, but haven't been successful here. I'm working with the latest version of Angular (8.x), and the images are inside an *ngFor loop, which makes this a little more challenging.
This aws solution seems like it would accomplish what you are after since you're already using S3. Looks like you could use the resize method to resize your image.
We're stocking rasters in our database, and we want to implement a function inside our web app that will allow the user to add contour lines to the map based on a raster. We want the user to be able to customize the contour levels and colors.
Do anyone have an idea which tools I should be using? I think that I should be using the Python scripting extension of GeoServer, but I don't know if this is possible to implement such a function.
Thanks for your comments !
The easiest way to create contours on the fly from a raster data source in GeoServer is to use the rendering transform gs:Contour. There is a full example in the documentation. This shows how to use an SLD file to specify the contour values, which are then extracted on render and drawn using the remainder of the SLD file. The example assumes a fixed set of contours using a static file, this is easiest.
But the WMS standard allows a client (OpenLayers) to upload a new SLD file with a map request - this is exactly what you want to do here. I suggest that you generate a working SLD file and then use a templating engine of your choice to insert the user's chosen values into the file before sending it to GeoServer for processing. The downside of this is that you will need to send the SLD file with each request and tiling will probably not work well (at all?). You may be able to speed things up a bit by using library mode for the styles, but at the risk of complicating the client.
Why would you do such thing??: because in some particular cases I need to hide the source values of a graph generated by dygraph. Since in the case of "not hidden values" I am using dygraphs js libray, using this particular feature would save me a lot of time.
This way I would have the same look and feel, and I would not have to modify the data generation process.
I would like to know if this road is feasible or utter madness:
Steps: (using Yii-PHP over an Apache server)
Generate javascript page on the server side.
Get image as png (somehow), still on the server side.
Send the image to the client as the only thing he can receive.
There's a ton of graphing libraries for PHP, why not use one of those? (e.g. JpGraph, pChart...) Pretty much every one of them can produce an image in PNG.
Feasible steps:
Invoke a PHP graphing library on server side
Render it as PNG and send to the client
If you insist on using a JavaScript library, then I guess PhantomJS is your only option, but it is not exactly optimal.
tl;dr: My vote goes to "utter madness".
Some dygraphs users have built a tool for exporting PNGs: demo and discussion.
I was wondering if there was any possible way to detect if there is content uploaded into images. For instance, using WinRAR, I could embed any sort of file into an image, while maintaining the images format as an image. Sites like imgur manage to block this. I am wondering how they do this.
I think one possible way would be to upload the image data to a canvas, so that it's represented purely as an array of pixels, and then reconvert the canvas's data back into an image. However, this would be rather time consuming on the server side.
Does anybody know of an efficient way to do this?
As you mentioned node.js and server side you can do the following:
1) Use imagemagic with node binding node-imagemagick - it uses cli imagemagic so it will be fast. Library is widely used so you will find plenty of examples how to remove Exif and unnecessary data from file. In worst case scenario you can recompress file.
2) If you are working with jpeg image only you can use node-jpegoptim and optimise each uploaded file. It is also using cli so will be fast
3) Finally you can use node-smushit and use Yahoo servers to do the job however you need to check if their terms of service are ok with your content.
Those are 3 that came to my mind, I hope one of those will satisfy your needs.