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.
Related
I want to use model-viewer or three.js to showcase some of my 3d models on a personal website. In order to display 3d models on the web, the client needs to fetch the files from the server (the 3d mesh and the texture images)
But I don't want my visitors being able to access any of these files. I hope you can point me in the right direction. Here are some ideas I had, but I don't think they'll work:
(1) Using something like crypto-js to encrypt and decrypt files
But when decrypting files on the frontend aren't users able to decrypt the files, too?
The key has to be transferred to the frontend code somehow, doesn't it?
(2) Splitting the files up into little pieces and recomposing them on the client
Same issue as with #1
The code for recomposition needs to sit on the client and can be used to access the files
When elaborating on those ideas, I am not quite sure if what I am trying to do is even possible 🤔
In case it is impossible... is there anything I can do to make it really hard for users to get access to the files?
The short answer is: If it is on a website, you don't stand a chance to protect it against a determined person with enough time on their hands. The only exception here was made for video-streams, which can use the 'Encrypted Media Extensions' API to get video to the screen without any parts of the browser being able to interact with raw data.
Whatever you do to protect the files, the code to read them needs to be sent to the browser as well. Eventually, the raw data will be somewhere in the memory of the js-runtime where it can be extracted using the built-in debugger. The same goes for any mechanism to somehow encrypt the code. It makes it more difficult, but not impossible. You could use WebAssembly to make that part of the code even harder to reverse-engineer, but I wouldn't need to do that:
In the end, the data needs to get to the webgl-api, so I could just use a browser-extension to intercept the relevant webgl-calls and obtain all the raw data there. You could go on and also encrypt the vertex-data in a way that can be decoded in the vertex-shader, but guess what: I can read the vertex-shader code as well.
And so the list goes on. There just is just no way to do it that cannot be somehow circumvented. But maybe you make it difficult enough for nobody to bother...
For me the most promising options seem to be:
use LoFi or partial models for rendering in the browser alongside renders of the full-resolution model. I've seen that on several sites for downloading CAD-/3D-models. They used merged models, sometimes reduced vertex-count, low-res textures and so on while providing images of what the final result will look like once I paid for it.
make up your own file-format or hide the file-format used in the network-view of the developer-tools. Google maps/earth for instance does that with their 3d-data (they are probably using something based on protobuf, but it's incredibly hard to reverse-engineer)
and yes, I guess you could also use the WebCrypto-API with a pre-shared secret so it is at least not too obvious which of the files contain the 3d-data.
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.
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.
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 have been learning a bit of jQuery and .Net in VB. I have created a product customize tool of sorts that basically layers up divs and add's text, images etc on top of a tshirt.
I'm stuck on an important stage!
I need to be able to convert the content of the div that wraps all these divs of text and images to one flat image taking into account any CSS that has been applied to it also.
I have heard of things that I could use to screen capture the content of a browser on the server which could be possible for low res thumbs etc, but it sounds a little troublesome! and it would really be nice to create an image of high res.
I have also heard to converting the html to html5 canvas then writing that out... but looks too complicated for me to fathom and browser support is an issue.
Is this possible in .NET?
Perhaps something with javascript could be done?
Any help or guidance in the correct direction would be appreciated!
EDIT:
I'm thinking perhaps I could do with two solutions for this. Ideally I would end up with a normal res jpg/png etc for displaying on the website, But also a print ready high res file would be very desirable as well.
PostScript Printer - I have heard of it but I'm struggling to find a good resource to understand it for a beginner (especially with wiki black out). Perhaps I could create a html page from my div content and send it to print to a EPS file. Anyone know any good tutorials for this?
We did this... about 10 years ago. Interestingly, the tech available really hasn't changed too much.
update - Best Answer
Spreadshirt licenses their product: http://blog.spreadshirt.net/uk/2007/11/27/everyones-a-designer-free-designers-for-premium-partners/
Just license it. Don't do this yourself, unless you have real graphics manipulating and print production experience. I'd say in today's world you're looking at somewhere around 4,000 to 5,000 hours of dev time to duplicate what they did... And that's if you have two top tier people working on it.
Short answer: you can't do it in html.
Slightly longer answer:
It doesn't work in part because you can't screen cap the client side and get the level of resolution needed for production type printing. Modern screen resolution is usually on the order of 100 ppi. For a decent print you really need something between 3 and 6 times that density. Otherwise you'll have lots of pixelation and it will generally look like crap when it comes out.
A different Answer:
Your best bet is to leverage something like SVG (scalable vector graphics) and provide a type of drawing surface to the browser. There are several ways of doing this using Flash (Spreadshirt.com uses this) or Silverlight (not recommended). We used flash and it was pretty good.
You might be able to get away with using HTML 5. Regardless, whatever path you pick is going to be complicated.
Once the user is happy with their drawing and wants to print it out, you create the final file and run a process to convert it to Postscript or whatever format your t-shirt provider needs. The converter (aka RIP software) is going to either take a long time to develop or cost a bunch of money... pick one. (helpful hint: buy it. Back then, we spent around $20k US and it was far cheaper than trying to develop).
Of course, this ignores issues such as color matching and calibration. This was actually our primary problem. Everyone's monitor is slightly different and what looks like red on one machine is pink on another.
And for a little background, we were doing customized wrapping paper. The user added text, selected images from our library or uploaded their own, and picked a pattern. Our prints came out on large-format HP Inkjet printers (36" and 60" wide). Ultimately we spent between $200k and $300k just on dev resources to make it happen... and it did, unfortunately, the price point we had to sell at was too high for the market.
If you can use some server-side tool, check phantomjs. This is a headless webkit browser (with no gui) which can take a page's screenshot, an uses a javascript api. It should do the trick.
Send the whole div with user generated content back to server using ajax call.
Generate an HTML Document on server using 'HtmlTextWriter' class.
Then you can convert that HTML file using external tools like
(1) http://www.officeconvert.com/products_website_to_image.htm#easyhtmlsnapshot
(2) http://html-to-image.acasystems.com/faq-html-to-picture.htm
which are not free tools, but you can use them by creating new Process on server.
The best option I came across is wkhtmltopdf. It comes with a tool called wkhtmltoimage. It uses QtWebKit (A Qt port of the WebKit rendering engine) to render a web page, and converts the result to PDF or image format of your choice, all done at server side.
Because it uses WebKit, it renders everything (images, css and even javascript) just like a modern browser does. In my use case, the results have been very satisfying and are almost identical to what browsers would render.
To start, you may want to look at how to run external tools in .NET:
Execute an external EXE with C#.NET