Display canvas in smaller size while maintaining resolution - javascript

I'm trying to create an online tool using html/javascript where users can upload their pictures that are imported into a canvas and then they can overlay other pictures on top of them, resize and move them around. To add this, I'm using fabric.js.
I do want to maintain the Image resolutions while I do this, so I have to resize the canvas according to the size of the base image which can get out of hand if the image is 4000px wide. What I'd like to do is display the images in a limited area such as 1000x1000 while maintaining the original size to provide the users with the original resolution when they are done. I tried messing around with CSS to limit the canvas display size but unlike img, canvas seems to override the limits I specify. I'm also using github pages to host this.
What would be the best way to do this?

I'd keep track of my images separately from my rendering layer. So, I'd either keep them in a hash or array in memory or, if that's too expensive, I'd persist them to storage (server side or in S3 or whatever).
Then, you just render low(er)-fidelity images to your canvas.

Related

I'm not sure when pre-rendering canvas is appropriate! (my example in description)

I'm pretty new to HTML5's canvas, and have been reading about pre-rendering canvas images to optimize performance...However, I'm not sure what pre-rendering is actually going to help versus when its just extra code I wouldn't need...
My project requires that I have a canvas, which will contain about 5 images of my web dev projects. These images will be revealed via the scroll distance, and using a wipe effect as shown below.
Would using a 5 off-screen canvas' to pre-load the 5 or so images beforehand be optimal in this case? I think it might be since the effect is dependent on scroll, so the user could repeatedly scroll up and down, and having pre-rendered canvas images may lower the computation required to render and draw the images...
Wipe Start
Wipe During

ReactJS reduce image file size without losing aspect ratio after user selects it in an input

I've been searching everywhere without luck.
A simple way to reduce the width of an image picked with a simple <input type="file" /> without it losing it's aspect ratio.
I am using jquery to select the image before uploading like so: $('#image')[0] but I need a way to reduce the image width before uploading to reduce the file size and data being sent to the server and of course received when users download the image when visiting the website.
If you still need it you can use this library. It worked for me, because it lets you resize width, height and file size, obviously with a image quality loss.
Compress.js library

Create image montage without resizing

I have a folder of images and I want my website to display them all without resizing them while minimizing whitespace.
Is this possible at all?
A few of the images would be able to be rotated to make it fit better, but I'm not sure how I would go about this. The page would have to figure out the way to arrange the images correctly to minimize whitespace, and then create divs with absolute page positions to place each image at that location.
I would also want the page to be able to dynamically resize, so a layout algorithm that takes a few seconds to run would make window resizes super slow.
I found some tutorials on how to do this WITH resizing, but I'm trying to keep the relative sizes of each image the same to one another, so I can't resize them.

Multiple image sizes vs browser image resizing / scaling

I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?
The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.

Image Zoom using javascript?

Has anyone got to some good code to zoom into an image using javascript?
I know I could just resize it etc but was being lazy and looking for something clever to zoom to different levels, move around when zoomed etc
Check this:
jQZoom
Zoomimage - jQuery plugin
jQuery ImgZoom
FancyBox
How big are the images?
If they are huge images you do them like google map style using this http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
This really depends on what quality you are after. If you need a hires hiquality image with detailed zoom levels and proper interpolation you will need to write a backend service to serve up zoomed portions of your images. If you have no care for quality or speed, you could download the entire image and fit it to display inside a div absolutely positioned, offset for the area you want to view and sized as determined by your zoom level.
I would say you are probably after the first option. There are some tools already made for this, I persoanlly havnt used any of the tools; I am sure othes will post links to others you can try; I have written my own service and client. I cant go into the exact details as its proprietary, but I can give you an overview of what I do.
I have an asp.net generic handler that takes a query string denoting which image (by an id) and the coordinates to zoom on and the target image size. I have the service load the image and crop and resize it (its more complicated than that as I have many optimizations and preparsing when the file is originally uploaded, such as multiple cross sections of the file for faster serving when zooming, but what I describing here is the basics).
That service simply returns type image/jpeg and sends the image.
On the client side I have written a marquee box control that allows the user to marquee an area on the image they want to zoom in on. they marquee the area and click zoom. This then calculates the offsets into the image of the selected coordinates based on the original image size and the viewable image size. I send hese coords to the handler previously mentioned.I load the the url with query string of the srvice into an Image object, and handle onload. If all went well i then swap that to the viewed image and updates all my client side variables for determining where on the image I am zoomed into and then it can be zoomed again or zoomed out or panned further from there.
Now i understand your lazy requirement, but i need to say that writing this is actually quite easy to do to get the basics going. the hardest part you will find is doing a select box. But then even that can be as simple as tracking two click. Top left of the zoom select marque and bottom right. Or not having a select box at all and have a zoom in and out only at predetermined intervals. I on my projects required a zoom box as its a fairly complex image analysis solution.
I hope this at least helpful and leads you to something useful.

Categories

Resources