Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I need to resize an image to display on different pages in different sizes, keeping the aspect ratio of the original image.
Can I do it programatically or do I need to preload images of different sizes
If you set just the width or just the height of an image and leave the other dimension unspecified, the browser will scale the image proportionally while maintaining its aspect ratio.
Working demo: http://jsfiddle.net/jfriend00/NRLQ5/
If you are using Css3 they you can use transform:scale(scalefactor)
You can use WebImage class from System.Web.Helpers assembly.
It provides a method Resize, which allows you to resize keeping aspect ratio unchanged
public WebImage Resize(
int width,
int height,
bool preserveAspectRatio,
bool preventEnlarge
)
Beside that you can create WebImage instance using file path, stream, or byte array and easily add watermark.
WebImage image = new WebImage(Server.MapPath("~/upload/my_image.png"));
WebImage image_small_1 = image.Resize( Convert.ToInt32(image.Width / 2), Convert.ToInt32(image.Height / 2), true, true );
You can save image to disk or if you environment allows it store in cache
image_small_1.Save(Server.MapPath("~/upload/my_image_small_1.png"), "png", true);
byte[] to_be_cached = image_small_1.GetBytes("png");
Related
This question already has an answer here:
Html5 Canvas resize
(1 answer)
Closed 5 years ago.
I'm implementing image upload, but before that, I want to do some resizing based on limits (eg. max-width, max-height, max-area). Problem is not resize image, but filesize.
I already gave up with quality, there was no visible differences in results gained from: Canvas, Pica, Hermite, so i decided to go with offscreen canvas.
Filesize is much bigger problem, eg.: if I have PNG image, that is 345x518 (54.2kB) and I want it to fit into area 512x512, after resizing it into 341x512 jpeg (same aspect ratio), filesize became 171.7kB.
Resize function:
function _canvasImageGet(original, dims) {
var canvas = document.createElement("canvas");
canvas.width = dims.w;
canvas.height = dims.h;
canvas.getContext("2d").drawImage(original, 0, 0, canvas.width, canvas.height);
return canvas;
}
Is there any way, how can I get smaller or same filesize after resizing? It doesn't have to be using Canvas, but I will appreciate, if resizing will be on client. Thanks for all anwers.
Canvas and other libraries I have used are not using compression so after resizing, output file is naturally bigger than it was before. I have found exactly what I needed. image-compressor does resizing and compression and all it's done on client-side. There is another library JIC, but it can't do resizing.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Like our avatars: is it possible to create a simple avatar that i can use as placeholder for my users?
and extending that: how far can you go with the art preferences: colors, shape etc.
Link only answers are frowned upon but I think I'll take the risk: There are several libraries for those so called identicons Sampson linked to. The code there is Java (or looks very similar). A pure JavaScript implementation seems to be jdidenticon. You have more possibilities with PHP (you can use e.g.: ImageMagick and similar) but JavaScript is cheaper for your load ;-)
It is possible to create 2D and 3D graphics with javascript and the HTML5 tag canvas
<canvas><canvas>
Inside your javascript code you define what should painted inside your canvas
var context = document.getElementById("canvasId").getContext("2d");
var width = 125; // Triangle Width
var height = 105; // Triangle Height
var padding = 20;
// Draw a path
context.beginPath();
context.moveTo(padding + width/2, padding); // Top Corner
context.lineTo(padding + width, height + padding); // Bottom Right
context.lineTo(padding, height + padding); // Bottom Left
context.closePath();
// Fill the path
context.fillStyle = "#ffc821";
context.fill();
<canvas id="canvasId" width="165" height="145"></canvas>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
If I have a map in SVG format, how can I scale the image to be say, X times bigger? How would I achieve this? I want to be able to scale it based on an X variable which of course varies
I have looked into it but I am stretched for time. I just want to know where to begin.
To scale SVG data you need to use a scale transformation.
So to make an element, e.g 3 times bigger you would use:
var mySVG = document.getElementById("mySvgElement");
var scaleCoefficient = 3; //this will make it 3 times bigger in x/y direction
mySVG.setAttribute("transform", "scale(" + scaleCoefficient + "," + scaleCoefficient + ")");
That will apply a scale transformation of '3' in x/y directions thus making the element 3 times bigger without changing it's aspect ratio
SVG elements are defined by a transformation matrix - this is what vector shapes generally use to define translation/rotation/size without changing the actual SVG geometry data of the shapes themselves.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
Is it possible to extract the colors from an image of any type using javascript? i want the percentage of each color in the image as well.
To get the base 64 encoded image data,
function getBase64FromImage(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
return canvas.toDataURL("image/png").replace(/^data:image\/(png|jpg);base64,/, "");
}
You'll probably want to have a library process the image data, rather than doing it yourself:
What is the best JavaScript image processing library?
Yes this is possible. You need to load the image on a canvas. Then you can extract the color on each arbitrary x,y coordinate.
You might want to have a look at
http://lokeshdhakar.com/projects/color-thief/
getPixel from HTML Canvas?
How to fetch a remote image to display in a canvas?
How to add image to canvas
This question already has answers here:
Canvas width and height in HTML5
(3 answers)
Closed 8 years ago.
The application lets user save the designs and post it so other users can view it later.
The original canvas saved with the proportions of width=700 and height=600. But when displaying the canvas, I want to resize the canvas to fit into dimensions of (350,300). half of the original. But if I directly apply those dimensions and load width setWidth() and setHeight() it loads with original proportions.
All I want is to display the canvas with new dimensions.
If you are using the library fabric.js, that's not enough.
Considering that 'canvas' is the fabric.js instance object, you should do this to avoid distorsion artifacts:
canvas.setWidth( <desired width> );
canvas.setHeight( <desired height> );
canvas.calcOffset();
Previously answered here.
I'm not sure what you've been trying, but
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = 800;
canvas.height = 600;
should work fine.