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>
Related
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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
How would I go about making this polygon smaller so it would fit in a 800X300 canvas area?
context.beginPath();
context.moveTo(200,0);
context.lineTo(400,0);
context.lineTo(600,200);
context.lineTo(600,400);
context.lineTo(400,600);
context.lineTo(200,600);
context.lineTo(0,400);
context.lineTo(0,200);
context.closePath();
context.fill();
I cannot seem to figure out what numbers need to be changed.
You could use the scale() method.
context.scale(x, x);
where x is the factor to scale by.
You can either replot your lines, or the quickest way would be to use the scale method on your context like this
context.scale(0.5,0.5);
That would make it half the size, so a full example would be
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
context.scale(0.5,0.5);
context.beginPath();
context.moveTo(200,0);
context.lineTo(400,0);
context.lineTo(600,200);
context.lineTo(600,400);
context.lineTo(400,600);
context.lineTo(200,600);
context.lineTo(0,400);
context.lineTo(0,200);
context.closePath();
context.fill();
See jsfiddle here http://jsfiddle.net/XLW2P/1/
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 9 years ago.
Improve this question
I Want to have an image of a car, and when a user clicks a spot on the car, I drop an x image or a circle image on that spot. I need to save the spot where they clicked so when they come back I display it in the same spot.
What is the best way to do this in html?
Should I use an image with other images overlaid on top of it?
Should I use html5?
Anybody know of any working examples of a similar nature?
Want to use js, html5, etc to make this work on iphone safari (not native app). App is ruby on rails, so I could make use of some server side features, but would prefer to leverage as much in html/css if possible.
You can use a canvas element to do this. The canvas element allow you to draw images and shapes to it.
To store and retrieve clicks you can use Web Storage (localStorage).
For example - load the image and paint it to canvas:
ONLINE DEMO HERE
HTML:
<canvas id="demo" width="500" height="400"></canvas>
JavaScript:
/// get context for canvas, cache dimension
var ctx = demo.getContext('2d'),
w = demo.width,
h = demo.height,
img = new Image(); /// the image we want to load
/// when done go draw existing marks and start listening for clicks
img.onload = function() {
renderMarks();
demo.onclick = function(e) {
/// convert mouse coord relative to canvas
var rect = demo.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
/// store mark
addMark(x, y);
/// redraw everything
renderMarks();
}
}
These are the main functions, this first renders existing marks to canvas on top of the image:
function renderMarks() {
/// re-draw image which also serves to clear canvas
ctx.drawImage(img, 0, 0, w, h);
/// get existing marks from localStorage
var marks = localStorage.getItem('marks'),
i = 0;
/// if any, render them all
if (marks !== null) {
/// localStorage can only store strings
marks = JSON.parse(marks);
/// set color and line width of circle
ctx.strokeStyle = '#f00';
ctx.lineWidth = 3;
/// iterate marks and draw each one
for(;i < marks.length; i++) {
ctx.beginPath();
ctx.arc(marks[i][0], marks[i][1], 30, 0, 2 * Math.PI);
ctx.stroke();
}
}
}
This adds a mark to the collection:
function addMark(x, y) {
/// get existing marks or initialize
var marks = JSON.parse(localStorage.getItem('marks') || '[]');
/// add mark
marks.push([x, y]);
/// update storage
localStorage.setItem('marks', JSON.stringify(marks));
}
(The code can be optimized in various ways but I made it to show the basic principles).
If you now navigate away from the page and come back you will see the marks are rendered again (disclaimer: jsfiddle may or may not give the same page so test locally/in "real" page to be sure).
The circles here can be anything, an image, a different shape and so forth.
To clear the marks simply call:
localStorage.clear();
or if you store other data as well:
localStorage.removeItem('marks');
Well, you can create new images for each spot and when the user click you substitute the original image by the new one. You can do that using CSS or jQuery)
Depending if you are interested in showing areas or the exact x/y coordinates, an image <map> might be of use.
Also check out this stackoverflow question.
I have no working example to show, but I think this qualifies as similar in nature. I am not sure how you'd save the info for recalling state (coming back same session or days/months later?).
I hope this is of some use.
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");