We Keep Coding

Force cropper to always be either full width or full height

I have been using cropper js.
I am resizing the cropper based on input values(integer). For example A and B.
So when user enters A = 200 and B = 240. The cropper calculates the aspect ratio and shows the cropper. Is there a option or some kind of hack to force the cropper to either force it to fill the width or height based on the ratio?
If i was unclear in my question see images below.
First there is an incorrect image where i got spaces on both sides and at the top and bottom.
Incorrect
This image is correct:
Correct
So at the correct image the user shouldn't be able to make it smaller, and if the the ratio get's below 1 in ratio it should fill the height instead of width.
Do someone have a good soultion on this?

I figured it out!
If someone looking for the answer, what i did -->
Set following options to cropper:
viewMode: 2 (not necessarily 2, but needs to be more than 0).
cropBoxMovable: true. (Could only change the cropBox by my inputs.)
dragMode: 'none'. Otherwise the user could drag a new cropBox.
cropBoxResizable: false. OtherWise user could drag in the corners in of crfopbox and change size.

How to convert points to pixels to scale properly

I'm trying to do and image highlight. So I take pdf image preview and based on the field (extracted from pdf) the user clicks, it will highlight the field in the image preview.
Im trying to accomplish this using css where a have rectangle at the bottom of the image and just set a margin based on the field position that will highlight that field in the pdf image preview.
The problem is that I can't quite get the conversion right for my margins.
So I know there 72pt in an inch and 96 pixels in an inch.
Don't really know where to take it form there. Should I also consider the user's resolution? Is there a library I can use?
So far what I have given:
field positions (in points),
pdf max height/width (in points),
image preview max height/width (in pixels)
How can I convert the field position to pixels so I can highlight that field in the image preview?

Convert points to pixels.
pdfPointsH / pdfPixelsH = x
pdfPointsW / pdfPixelsW = y
Use proportion to translate Point coordinates into Pixel coordinates e.g.:
PointX * x = PixelX
PointY * y = PixelY
Hope that helps.

Plupload - Resize image on upload, with a minimum height, and minimum width instead of maximum

I have a Plupload uploader running, which is making both a thumbnail and a large size image when uploading each image.
The thumbnail I need to make fit into a 150x150px box. I have some javascript that scales the image down, so that the smallest width or height of the image gets to be 150px, and the bigger one is hidden with overflow:hidden.
The problem is when I use the Plupload script for resizing, it only takes "maximum" sizes for width and height, meaning that if I have a image that have a 1:2 ratio, it would be resized to 75x150px.
Is there any way of making this work as minimum sizes?
This is how my thumbnail resize looks at the moment:
var uploader = $('#uploader').pluploadQueue();
uploader.bind('BeforeUpload', function(up, file) {
if('thumb' in file){
up.settings.url = 'upload.php?dir=' + ($("#chosen_gallery :selected").val()) + '&subdir=thumbs',
up.settings.resize = {width : 150, height : 150, quality : 60};
}
}

Use the crop:true value on the resize settings object. Will scale to the shorter side, then crop the ends to match your specified width/height

HTML5 canvas image scaling to a smaller size and back to original

A situation I'm trying to solve. I'm loading an image onto a canvas, then making some edits(resize, crop etc.) to it and saving the resultant image to a folder. Now if the original image is larger than the canvas dimensions, the resultant image is cropped. Hence I'm trying to scale the image to a smaller size that fits in the canvas, apply the effects, and then scale it back to the original dimensions and save it. Is there a way to do this?
My JS pseudo code is somewhat like this:
//load the image using drawimage
//compare image dimensions with canvas dimensions, scale down the image if large
//apply the effects
(I have done till here)
//scale it back to original size
//save
How do I scale it to and fro using canvas scale method? I'm assuming I have to calculate a widths ratio for scaling down and up like so:
scale_down_width = image_orig_width / canvas_width
scale_down_height = image_orig_height / canvas_height
//For scaling down
scale(1*scale_down_width, 1*scale_down_height)
//For scaling up
scale(1/scale_down_width, 1/scale_down_height)
Am I doing this correct?
Scale down works fine, but scale up doesn't, how do I do it right?

html5 image cropping

I'm using context-blender to apply a multiply effect on the first 192 pixels of the html background-image with a fixed color to achieve a transparency effect on the header of the page.
On the html I have 2 canvas. One for the part of the image to apply the multiply effect and one for the color.
On the javascript, after setting the color of the color-canvas and the width of both canvas to the window.innerWidth I'm getting the background image with:
imageObj.src = $('html').css('background-image').replace(/^url|[\(\)]/g, '');
Now comes the problem. I want to draw a cropped image to the image to the image-canvas so I can apply the multiply effect. I'm trying to do the following:
imageObj.onload = function(){
// getting the background-image height
var imageHeight = window.innerWidth * imageObj.height / imageObj.width;
// get the corresponding pixels of the source image that correspond to the first 192 pixels of the background-image
var croppedHeight = 192 * imageObj.height / imageHeight;
// draw the image to the canvas
imageCanvas.drawImage(imageObj, 0, 0, imageObj.width, croppedHeight, 0, 0, window.innerWidth, 192);
// apply the multiply effect
colorCanvas.blendOnto( imageCanvas, 'multiply');
}
But I'm doing something wrong getting the cropped height.
Ex: For an 1536x1152 image and a 1293x679 browser container, the value I'm getting for the source cropped height is 230 but to get the correct crop I need to use something around 296.
Edit:
I'm using background-size: cover on the css to create the background-image
Edit2:
I created a fiddle to illustrate the problem. If you uncomment the line //cHeight *= magicConstant; the cropped image looks a lot better but things stop making sense. I removed the multiply effect on the fiddler but that's not required to reproduce the problem. I also noticed that the behavior changed if I remove the second canvas from the URL.
Btw, this behavior happened with google chrome, but I think the same thing happens on safari and firefox.

OK, I've fixed it. Man was that hard! Mainly because you forgot to set the imageCanvas' canvas height. It also didn't help that the image has a white border. I spent a hell of a lot of time trying to figure out where the padding was coming from.
So to start, for the case of the fiddle, in function doBlending(), set imageCanvas.canvas.height = height;
Then the calculations in crop() need to cover 2 possibilities. Is the image being scaled for height and truncated on the left or scaled for width and truncated on the bottom? I'm not going to write both for you, but here's the one for the case where it is scaled for height:
function crop(imageObj, imageCanvas, colorCanvas) {
// Assumes bg image is scaled for hight
var scale = imageObj.height / window.innerHeight;
var targetHeight = imageCanvas.canvas.height;
var targetWidth = window.innerWidth;
imageCanvas.drawImage(imageObj,
0, 0, targetWidth * scale, targetHeight * scale,
0, 0, targetWidth, targetHeight);
}
I really have no idea where you came up with the scaling factors in your example. The image is going to be scaled by multiplying both the x and y dimensions by some scale factor. That's how you preserve the aspect ratio. The scale factor will be the larger of the one to make the height of the image match the height of the window and the one to make the width of the image match the width of the window.

I think it may not be valid for you to be using window inner dimensions here. Since cover will maintain the aspect ratio of the background image it means that both of its dimensions may not be fully displayed. So if you are trying to transform between aspect ratios to determine where to clip, you would have to account for the fact that the image may flow out of the window borders.