I need to scale an image with maintaining the aspect ratio in AS3. It should be scaled to the full stage size but nothing should be cut off.
How to do it?
Thank you,
Uli
Something like this should work:
// set the scale to fit the width of the image to the width of the stage
var scale:Number = stage.stageWidth / myImage.width;
// if the height of the image will be taller than the stage,
// set the scale to fit the height of the image to the height of the stage
if(myImage.height * scale > stage.stageHeight){
scale = stage.stageHeight / myImage.height;
}
// apply the scale to the image
myImage.scaleX = myImage.scaleY = scale;
Related
How to scale inside a clip?
I dynamically create a clip that simulates a window and calculate its width as
stage.stageWidth * my_window_width / my_scene_width;
inside the window, i need to create a square that must have a width, coordinate x, and so on, proportionally scaling according to the size of the window screen. Because if the size of the square is set pixel by pixel, then the sizes differ on different screens.
You could setting square w/h according to window size...
mc_window.square.width = (mc_window.width / 8); //square is eight times smaller
mc_window.square.height = mc_window.square.width; //set to "square" geometry
I create a clip that simulates a window:
window_bonus = new windowBonus;
window_bonus.x = stage.stageWidth * indent_to_x_to_photoshop / width_all_file_photoshop;
window_bonus.y = stage.stageHeight * indent_to_y_to_photoshop / height_all_file_photoshop;
window_bonus.width = stage.stageWidth * width_of_photoshop / width_of_all_file_photoshop;
window_bonus.height = stage.stageHeight * height_of_photoshop / height_all_file_photoshop;
I get a window like in figure 1.
Then I create another clip on the window - figure 2.
And on the device it looks like in figure 3.
I decided to create clips of containers that are not initially visible but they are installed on the window and therefore are scaled with the window,
Inside them already, I load the card image.
But my question is how to scale without containers,
using width, height, x and y
for a nested clip?
I have dynamic content on my webpage with some images I feature. On large screens I have the image floated to the right of the page, and on small screens I treat the image as a block and set its width to 100% of the screen.
That has worked well enough for most images, but sometimes the image is really tall, which makes it hard on small screens where the image is 100% of the screen width and you might have to scroll for a while to get past the image.
To combat that I set a max-height for the image, and have a blurry copy of the image behind the first image that is 100% of the width to fill in the void. (Kind of like what TV stations do when they broadcast in one resolution and show a video with a different resolution).
It works well, except I want the image to be as big as it can, either 100% width or upto the max-height. For small images it just goes as big as the dimensions of the actual image.
figure{position:relative;overflow:hidden;float:right;width:202px;margin:0 0 0.5rem 0.5rem;font-size:0;text-align:center}
figure img{margin:auto;max-width:100%;max-height:400px;width:auto;height:auto;display:block;border:0}
figure span{display:block;position:absolute;z-index:-1;filter:blur(10px);-ms-filter:blur(10px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');top:-10px;left:-10px;padding:10px;width:100%;height:100%}
figcaption{text-align:left;background:#fff;font-size:0.75rem}
#media(max-width:528px){
figure{float:none;margin:0 auto;width:100%}
figure img{max-height:300px}}
<figure>
<a href="#"><img src="dynamicPic.jpg">
<span style="background:url(dynamicPic.jpg) no-repeat center;background-size:cover"></span>
</a>
<figcaption>Dynamic Caption</figcaption>
</figure>
I think a little bit of Javascript can do the trick
var img = document.getElementById("image-id-here");
img.onload = function(){
var maxWidth = (document.body.clientHeight / img.height) * img.width;
var maxHeight = (document.body.clientWidth / img.width) * img.height;
if(maxWidth > document.body.clientWidth){
img.width = img.width * (maxHeight / img.height);
img.height = maxHeight;
}else{
img.width = maxWidth
img.height = img.height * (maxWidth / img.width);
}
}
This should resize the image to the maximum size but still maintain the aspect ratio.
Important: The code above should be ran after the image tag has loaded
I have an image and have overlaid a canvas on top of it so that I can draw 'on' the image without modifying the image itself.
<div class="needPic" id="container">
<img id="image" src=""/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas>
</div>
I can specify the width and height in pixels in the above canvas line and it works great, however I need this to dynamically sized based on screen size (has to work on small smartphones as well as tablets). When I try to put the percentage in as shown above, it interprets it as pixels. Thus, the canvas will be 70px wide and 60 px tall.
For some reason I can't size the canvas in the CSS so looks like I have to do it in the html. To clarify, when I try to specify the canvas dimensions in the CSS they don't actually change the size of the canvas. It seems as if the image is interfering in some way.
Any help would be appreciated.
Update: If I do <canvas id="sketchpad" style="width:70%;height:60%;"></canvas> then it defaults to a height of 150px and width of 300px (regardless of device) and then stretches the canvas to fit the div. I set the div to be 60% width and 60% height in the css, thus the canvas stretches to fill that. I confirmed this by logging the canvas.width vs canvas.style.width -- canvas.width was 300px and canvas.sytle.width was '60%' (from the parent div). This causes some really strange pixelation and drawing effects...
You need to set the size of the canvas in pixels or you will not only reduce the quality of its content but if you want to draw on it the mouse-coordinates will be off as well. Don't use CSS to scale canvas if you're gonna use it interactively.
I would recommend you adjust your image then adopt the canvas to whatever size the image is. You can do this by using getComputedStyle(element) which gives you whatever size the element is set to in pixels.
After image's onload (as you need to be sure the image is actually loaded to get its size) or later if you change the image (CSS) size on the go, you can do this:
/// get computed style for image
var img = document.getElementById('myImageId');
var cs = getComputedStyle(img);
/// these will return dimensions in *pixel* regardless of what
/// you originally specified for image:
var width = parseInt(cs.getPropertyValue('width'), 10);
var height = parseInt(cs.getPropertyValue('height'), 10);
/// now use this as width and height for your canvas element:
var canvas = document.getElementById('myCanvasId');
canvas.width = width;
canvas.height = height;
Now the canvas will fit image but with canvas pixel ratio 1:1 to help you avoid problems when you're gonna draw on the canvas. Otherwise you will need to convert/scale the mouse / touch coordinates as well.
Resize Your canvas to fit Window/Browser Size :
<script>
function resizeCanvas() {
var canvs = document.getElementById("snow");
canvs.width = window.innerWidth;
canvs.height = window.innerHeight;
}
</script>
<body onload="resizeCanvas();">
<canvas id="snow" ></canvas>
</body>
Set the canvas height to the window's innerHeight and the width to the window's innerWidth:
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
If you want a specific percentage, multiply them by the percentage.
Example:
//25% of width and height
canvas.height = window.innerHeight * 0.25;
canvas.width = window.innerWidth * 0.25;
//And so on for other percentages
You could resize the canvas to fit the width of the image in pixels via JavaScript. Since you're using a canvas you are probably using JavaScript already so this should not be a problem.
See Resize HTML5 canvas to fit window, although not identical, a similar solution should work.
Instead of using width="", use style="" as such
<canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas>
EDIT:
<div class="needPic" id="container" style="width:70%; height:60%; min-width:__px; min-height:__px">
<img id="image" src="" style="width:70%; height:60%; min-width:__px; min-height:__px"/>
<!-- Must specify canvas size in html -->
<canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas>
</div>
I'm having a sprite (canvas) which is being scaled. The canvas has a mask. The problem is that simple scaling (scaleX=newScale; scaleY=newScale;) takes the part of canvas under mask beyound the mask. So I need to move canvas after scaling in such a way that point of canvas under mask remain in the same place. I'm trying to do something like the following:
var deltaScale = newScale / scale;
//w and h are width and height of mask
canvas.scaleX = newScale;
canvas.scaleY = newScale;
canvas.x += (canvas.x + w/2) - (canvas.x + w/2) / deltaScale;
canvas.y += (canvas.y + h/2) - (canvas.y + h/2) / deltaScale;
still after that central point do not remain on the same place. Can somebody prompt me how should I move canvas after scaling?
PS: width and height of canvas is extremely big (some of 25000) if that helps.
UPD: Canvas with it's mask are added on Sprite, mask is having the same sizes as that parent sprite, canvas.x and canvas.y are negative.
The way I did something similar before was to put the canvas sprite inside another sprite eg. zoom which has its reg point in the centre of the screen (or where ever needed). You can then move canvas around inside the zoom sprite (in my case it was draggable) and scale the outer sprite so the centre is zoomed into.
Scaling and positioning different sprites I found much easier than doing an offset.
I want to insert an image in a webpage and I want it to fit in a 120*40 space.
The problem is, original images can have about any size (400*40, 30*220, etc.)
so if I set height attribute to 40, I might find myself with images larger than 120 width. The same goes if I set a 120px width.
If I set both width to 120 and height to 40, well it fits, but the original ratio is lost, and I don't want that.
What would you suggest ?
Get the original properties of the image in javascript and then set one of them (either to 120 width or 40 height) so that the other fits in 120*40 ?
There are a lot images like that in one page so I think this method is a bit heavy...
PHP solution :
<?php
list($width, $height, $type, $attr) = getimagesize($image);
if($width/$height>3)
$height *= 120/$width;
else
$height = 40;
?>
<img src="<?=$image?>" height=<?=$height?>>
see below for a javascript solution and a CSS solution
css properties max-width and max-height are what you need.
My guess is that it will resize itself if it reaches one of these.
I have used this alot in previous web projects.
But i havent used the combination of both yet.
EDIT: I've sais this in a comment, but setting both those properties does work in my tests. It keeps the ratio and resizes by the limit it reaches first. Do not set any width or height properties, these might cause problems
JavaScript is quite fast, so why not try it?
I'd just stick to finding the aspect ratio and adding some checks:
var width = image.width;
var height = image.height;
var ratio = width / height;
if (width > 120) {
width = 120;
height = 120 * ratio;
} else if (height > 80) {
height = 80;
width = 80 * ratio;
}
image.width = width + 'px';
image.height = height + 'px';
As you seem to be using PHP, ImageMagick can resize an image to fit inside of a predefined box. I only know how to do it via CLI, as I don't use PHP, but I bet the PHP code would be simple.
I was actually searching for an answer to a different query but came across yours.
I use this to resize images which I am finding is very handy in a number of my scripts, but what I would suggest is that you resize the image to a little bigger than the longest side of the container and then use css to center the image both horizontally and vertically and set the container with overflow:hidden;
You lose a small bit of the image around the edges but at least they are all inserted without any stretching or squashing.
Hope that helps you or anyone else trying something similar.