I know how to get this height of a font:
By placing the text in a div and getting offset height of the div.
But I would like to get this actual height (Which will depend on font family):
Is that in any way possible using web based programming?
Is there a simple solution? I think the answer is no.
If you're ok with a more involved (and processor-intensive) solution, you could try this:
Render the text to a canvas, then use canvasCtx.getImageData(..) to retrieve pixel information. Next you would do something similar to what this pseudo code describes:
first_y : null
last_y : null
for each y:
for each x:
if imageData[x][y] is black:
if first_y is null:
first_y = y
last_y = y
height = last_y - first_y
This basically looks for the top (lowest y-index) of the lettering (black pixels) and the bottom (highest y-index) then subtracts to retrieve the height.
I was writing the code while Jason answered, but I decided to post it anyway:
http://jsfiddle.net/adtn8/2/
If you follow the comments you should get the idea what's going on and why. It works pretty fast and it's not so complicated as it may sound. Checked with GIMP and it is accurate.
(code to be sure it wont be lost):
// setup variables
var c = document.createElement('canvas'),
div = document.getElementsByTagName('div')[0],
out = document.getElementsByTagName('output')[0];
// set canvas's size to be equal with div
c.width = div.offsetWidth;
c.height = div.offsetHeight;
var ctx = c.getContext('2d');
// get div's font from computed style and apply it to context
ctx.font = window.getComputedStyle(div).font;
// use color other than black because all pixels are 0 when black and transparent
ctx.fillStyle = '#bbb';
// draw the text near the bottom of the canvas
ctx.fillText(div.innerText, 0, div.offsetHeight);
// loop trough the canvas' data to find first colored pixel
var data = ctx.getImageData(0, 0, c.width, c.height).data,
minY = 0, len = data.length;
for (var i = 0; i < len; i += 4) {
// when you found it
if (data[i] != 0) {
// get pixel's y position
minY = Math.floor(i / 4 / c.width);
break;
}
}
// and print out the results
out.innerText = c.height - minY + 'px';
EDIT:
I even made jQuery plugin for this: https://github.com/maciek134/jquery-textHeight
Enjoy.
Related
I'm placing text in an HTML5 canvas. I'm setting the context textAlign value to center and the textBaseline to "hanging"
I'm confused, because safari and chrome and both webkit and the text placement is diffrent even when told to be in the same spot.
Chrome looks correct:
as does firefox
however safari places the text lower (same code)
any idea how safari calculates the position differently so I can build an exception for it?
Text to fit is a pain. Here is a none standard way to make text fit almost pixel perfect. (width may come inside requested a little and some fonts are just way to out there to measure).
This method renders the text at a large size "100px" and then measures its various parts. You can the fit to a rectangle, with four options that you can see in the demo. T, H and letters like that tend to be slightly shorter than O, G and rounded letters, you can opt to keep the round bits inside or not, you can ignore the tails 'y,j,g' or keep them inside.
The measuring function renders text several times to find the various parts, you can overlap several letters if you want a better sample or a specific font is a pain.
This solution will fit all browsers that have good canvas support.
Sorry about the naming but this particular issue does me in, we get great text in every other browser API so why not canvas????? (secret conspiracy of the SVG camp LOL ;) me thinks
Two functions. First measures the text, and returns an object containing the relevant info, and the second renders text to fit a rectangle. See the code at the bottom how to use it and set the two flags that control the hanging tail and roundy bits.
var canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 800;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
function superWTFCanvasTextMessure(font){ // just the font name please.....
var c = document.createElement("canvas"); // make canvas
var ctx1 = c.getContext("2d"); // get the thing that draw the stuff
ctx1.font = "100px "+font; // big font
ctx1.textAlign = "center"; // put it in the middle
ctx1.textBaseline = "middle";
// draw text nice and solid...
ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lp",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lq",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lg",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("lj",Math.floor(c.width/2),Math.floor(c.height/2));
// get the pixels as words
var data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
var top = 0;
while(data[top++] === 0); // find the first pixel on from the top;
var tail = data.length - 1;
while(data[tail--] === 0); // find the first pixel on from the bottom;
ctx1.clearRect(0,0,canvas.width,canvas.height); // clear up the mess
// and now for the Base draw text nice and solid...
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("T",Math.floor(c.width/2),Math.floor(c.height/2));
// get the pixels as words
data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
var bum = data.length - 1;
while(data[bum--] === 0); // find the first pixel on from the bottom;
// and the round bits the poke out in all the wrong places.
ctx1.clearRect(0,0,canvas.width,canvas.height); // clear up the mess
// and now for the Base draw text nice and solid...
ctx1.fillText("O",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("J",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("?",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("G",Math.floor(c.width/2),Math.floor(c.height/2));
ctx1.fillText("O",Math.floor(c.width/2),Math.floor(c.height/2));
// get the pixels as words
data= new Uint32Array(ctx1.getImageData(0,0,canvas.width,canvas.height).data.buffer);
var head = 0;
while(data[head++] === 0); // find the first pixel on from the bottom;
var theOtherBit = data.length - 1;
while(data[theOtherBit--] === 0); // find the first pixel on from the bottom;
return {
body: Math.floor(bum / canvas.width) - Math.floor(top / canvas.width)+1,
all : Math.floor(tail / canvas.width) - Math.floor(top / canvas.width)+1,
offset : Math.floor(c.height/2) - Math.floor(top / canvas.width),
t2A : Math.floor(theOtherBit / canvas.width) - Math.floor(head / canvas.width)+1,
t2t : Math.floor(tail / canvas.width) - Math.floor(head / canvas.width)+1,
offsetHead : Math.floor(c.height/2) - Math.floor(head / canvas.width),
font : ctx1.font,
};
}
function drawPixelPerfectTextTheHardWay(text,left,top,width,height,sWTFDesc){
var sy,offy;
ctx.font = sWTFDesc.font; // set up the same font as measured. (dont worry it will be scaled and can be any size but if not measure at 100 px this will not work as well)
ctx.textAlign = "center";
ctx.textBaseline = "middle";
var w = ctx.measureText(text).width; // get the width
if(sWTFDesc.bumsDown){
if(sWTFDesc.extrasIn){
sy = height/ sWTFDesc.t2A; // get the height scale
}else{
sy = height/ sWTFDesc.body; // get the height scale
}
}else{
if(sWTFDesc.extrasIn){
sy = height/ sWTFDesc.t2t; // get the height scale
}else{
sy = height/ sWTFDesc.all; // get the height scale
}
}
var sx = width / w; // get the x scale
if(sWTFDesc.extrasIn){
offy = sWTFDesc.offset * sy; // get top offset
}else{
offy = sWTFDesc.offset * sy; // get the correct offset
}
// set up the tranform
ctx.setTransform(sx,0,0,sy,left + width / 2, top + offy);
ctx.fillText(text,0,0);
ctx.setTransform(1,0,0,1,0,0); // reset the tranform to the default..
// all diddly done..
}
ctx.clearRect(0,0,canvas.width,canvas.height)
var superFontDesc = superWTFCanvasTextMessure("arial");
ctx.strokeStyle = "black";
ctx.fillStyle = "red";
ctx.strokeRect(10,200,700,140);
drawPixelPerfectTextTheHardWay("mind p & q's ? j,g",10,200,700,140,superFontDesc);
ctx.fillStyle = "green";
ctx.strokeRect(20,400,700,120);
superFontDesc.bumsDown = true;
drawPixelPerfectTextTheHardWay("test this Jimmy!!",20,400,700,120,superFontDesc);
ctx.fillStyle = "blue";
ctx.strokeRect(20,20,700,140);
superFontDesc.bumsDown = true;
superFontDesc.extrasIn= true;
drawPixelPerfectTextTheHardWay("test this Jimmy!!",20,20,700,140,superFontDesc);
ctx.fillStyle = "#a50";
ctx.strokeRect(20,570,700,140);
superFontDesc.bumsDown = false;
superFontDesc.extrasIn= true;
drawPixelPerfectTextTheHardWay("????&GGhjqgy",20,570,700,140,superFontDesc);
ctx.font = "20px arial";
ctx.textAlign = "left";
ctx.fillStyle = "black";
ctx.fillText("Round bits in and tails hanging.",10,174);
ctx.fillText("Round bits out and tails in.",10,354);
ctx.fillText("Round bits out and tails hanging.",10,540);
ctx.fillText("Round bits out and tails in.",10,724);
I have an image of a font I would like to draw on an HTML5 Canvas. At first I though about separating each letter into a different image but decided having a sprite sheet would be much cleaner. A problem with that though, is that not all the letters are the same size. Some are a few pixels wider than other characters.
While looking on Google, I came across one way that some people handled the problem. They added a line under each character to represent that characters length and then draw the bottom most line of the font image into an off screen canvas and analyze it pixel by pixel.
I tried to implement my own version of that idea, but was unable to get that far. Before I invest more time on that idea, I would like to know if it's a good solution or if there is any better ways of achieving the same thing.
So far I have a few small snippets i'm trying to put together, like this code:
getImagePixels: function( image, x, y, width, height )
{
var canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext('2d');
ctx.drawImage( image, 0, 0, image.width, image.height );
return ctx.getImageData( x, y, width, height );
}
and this
loadFontImage: function( image )
{
// Draw the bottommost line of this font image into an offscreen canvas
// and analyze it pixel by pixel.
// A run of non-transparent pixels represents a character and its width
this.height = image.height-1;
this.widthMap = [];
this.indices = [];
var px = getImagePixels( image, 0, image.height-1, image.width, 1 );
var currentChar = 0;
var currentWidth = 0;
for( var x = 0; x < image.width; x++ )
{
var index = x * 4 + 3; // alpha component of this pixel
if( px.data[index] > 127 )
{
currentWidth++;
}
else if( px.data[index] < 128 && currentWidth )
{
this.widthMap.push( currentWidth );
this.indices.push( x-currentWidth );
currentChar++;
currentWidth = 0;
}
}
}
As I can't comment I will just write this as an answer:
You could also simply create or generate a javascript object with all the widths included:
var fontWidths = {
a: 8,
b: 8
....
};
That way the overhead doesn't happen every time you're going to write something to the canvas.
I saw that you have helped David with his mirroring canvas problem before. Canvas - flip half the image
I have a similar problem and hope that maybe you could help me.
I want to apply the same mirror effect on my webcam-canvas, but instead of the left side, I want to take the RIGHT half of the image, flip it and apply it to the LEFT.
This is the code you've posted for David. It also works for my webcam cancas. Now I tried to change it, so that it works for the other side, but unfortunately I'm not able to get it.
for(var y = 0; y < height; y++) {
for(var x = 0; x < width / 2; x++) { // divide by 2 to only loop through the left half of the image.
var offset = ((width* y) + x) * 4; // Pixel origin
// Get pixel
var r = data[offset];
var g = data[offset + 1];
var b = data[offset + 2];
var a = data[offset + 3];
// Calculate how far to the right the mirrored pixel is
var mirrorOffset = (width - (x * 2)) * 4;
// Get set mirrored pixel's colours
data[offset + mirrorOffset] = r;
data[offset + 1 + mirrorOffset] = g;
data[offset + 2 + mirrorOffset] = b;
data[offset + 3 + mirrorOffset] = a;
}
}
Even if the accepted answer you're relying on uses imageData, there's absolutely no use for that.
Canvas allows, with drawImage and its transform (scale, rotate, translate), to perform many operations, one of them being to safely copy the canvas on itself.
Advantages is that it will be way easier AND way way faster than handling the image by its rgb components.
I'll let you read the code below, hopefully it's commented and clear enough.
The fiddle is here :
http://jsbin.com/betufeha/2/edit?js,output
One output example - i took also a mountain, a Canadian one :-) - :
Original :
Output :
html
<canvas id='cv'></canvas>
javascript
var mountain = new Image() ;
mountain.onload = drawMe;
mountain.src = 'http://www.hdwallpapers.in/walls/brooks_mountain_range_alaska-normal.jpg';
function drawMe() {
var cv=document.getElementById('cv');
// set the width/height same as image.
cv.width=mountain.width;
cv.height = mountain.height;
var ctx=cv.getContext('2d');
// first copy the whole image.
ctx.drawImage(mountain, 0, 0);
// save to avoid messing up context.
ctx.save();
// translate to the middle of the left part of the canvas = 1/4th of the image.
ctx.translate(cv.width/4, 0);
// flip the x coordinates to have a mirror effect
ctx.scale(-1,1);
// copy the right part on the left part.
ctx.drawImage(cv,
/*source */ cv.width/2,0,cv.width/2, cv.height,
/*destination*/ -cv.width/4, 0, cv.width/2, cv.height);
// restore context
ctx.restore();
}
I'm trying to implement ColorPicker using Canvas just for fun. But i seem lost. as my browser is freezing for a while when it loads due to all these for loops.
I'm adding the screenshot of the result of this script:
window.onload = function(){
colorPicker();
}
function colorPicker(){
var canvas = document.getElementById("colDisp"),
frame = canvas.getContext("2d");
var r=0,
g=0,
b= 0;
function drawColor(){
for(r=0;r<255;r++){
for(g=0;g<255;g++){
for(b=0;b<255;b++){
frame.fillStyle="rgb("+r+","+g+","+b+")";
frame.fillRect(r,g,1,1);
}
}
}
}
drawColor();
Currently , i only want a solution about the freezing problem with better algorithm and it's not displaying the BLACK and GREY colors.
Please someone help me.
Instead of calling fillRect for every single pixel, it might be a lot more efficient to work with a raw RGBA buffer. You can obtain one using context.getImageData, fill it with the color values, and then put it back in one go using context.putImageData.
Note that your current code overwrites each single pixel 255 times, once for each possible blue-value. The final pass on each pixel is 255 blue, so you see no grey and black in the output.
Finding a good way to map all possible RGB values to a two-dimensional image isn't trivial, because RGB is a three-dimensional color-space. There are a lot of strategies for doing so, but none is really optimal for any possible use-case. You can find some creative solutions for this problem on AllRGB.com. A few of them might be suitable for a color-picker for some use-cases.
If you want to fetch the rgba of the pixel under the mouse, you must use context.getImageData.
getImageData returns an array of pixels.
var pixeldata=context.getImageData(0,0,canvas.width,canvas.height);
Each pixel is defined by 4 sequential array elements.
So if you have gotten a pixel array with getImageData:
// first pixel defined by the first 4 pixel array elements
pixeldata[0] = red component of pixel#1
pixeldata[1] = green component of pixel#1
pixeldata[2] = blue component of pixel#1
pixeldata[4] = alpha (opacity) component of pixel#1
// second pixel defined by the next 4 pixel array elements
pixeldata[5] = red component of pixel#2
pixeldata[6] = green component of pixel#2
pixeldata[7] = blue component of pixel#2
pixeldata[8] = alpha (opacity) component of pixel#2
So if you have a mouseX and mouseY then you can get the r,g,b,a values under the mouse like this:
// get the offset in the array where mouseX,mouseY begin
var offset=(imageWidth*mouseY+mouseX)*4;
// read the red,blue,green and alpha values of that pixel
var red = pixeldata[offset];
var green = pixeldata[offset+1];
var blue = pixeldata[offset+2];
var alpha = pixeldata[offset+3];
Here's a demo that draws a colorwheel on the canvas and displays the RGBA under the mouse:
http://jsfiddle.net/m1erickson/94BAQ/
A way to go, using .createImageData():
window.onload = function() {
var canvas = document.getElementById("colDisp");
var frame = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var imagedata = frame.createImageData(width, height);
var index, x, y;
for (x = 0; x < width; x++) {
for (y = 0; y < height; y++) {
index = (x * width + y) * 4;
imagedata.data[index + 0] = x;
imagedata.data[index + 1] = y;
imagedata.data[index + 2] = x + y - 255;
imagedata.data[index + 3] = 255;
}
}
frame.putImageData(imagedata, 0, 0);
};
http://codepen.io/anon/pen/vGcaF
I want to resize image using very simple algorithm. I have something like this:
var offtx = document.createElement('canvas').getContext('2d');
offtx.drawImage(imageSource, offsetX, offsetY, width, height, 0, 0, width, height);
this.imageData = offtx.getImageData(0, 0, width, height).data;
offtx.clearRect(0, 0, width, height);
for(var x = 0; x < this.width; ++x)
{
for(var y = 0; y < this.height; ++y)
{
var i = (y * this.width + x) * 4;
var r = this.imageData[i ];
var g = this.imageData[i+1];
var b = this.imageData[i+2];
var a = this.imageData[i+3];
offtx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
offtx.fillRect(0.5 + (x * this.zoomLevel) | 0, 0.5 + (y*this.zoomLevel) | 0, this.zoomLevel, this.zoomLevel);
}
}
this.imageData = offtx.getImageData(0, 0, this.width * this.zoomLevel, this.height * this.zoomLevel);
However, the problem I have with this solution, is that the image looses any transparency information that way. I don't know if this happens somewere in this algorithm, or maybe putImageData that I am using later to display that image is doing this, but I can't seem to be able to preserve transparency.
Each time I do this I create a canvas, I put the image on that canvas and use getImageData to get image from that canvas as you can see in the first lines of the code. Maybe there is no other way, so I might not mind that...
But the problem is I use two for loops to draw resized image and then use getImageData to store that image information. This is a wierd way to do it. I would prefer to create empty image data and fill it with all the original image information only resized. I can't grasp that with my mind, I can't image the loop structure for this. To show what I mean:
for(var x = 0; x < this.width; ++x)
{
for(var y = 0; y < this.height; ++y)
{
var i = (y * this.width + x) * 4;
var r = this.imageData[i ];
var g = this.imageData[i+1];
var b = this.imageData[i+2];
var a = this.imageData[i+3];
//I WOULD LIKE MAGIC TO HAPPEN HERE THAT WILL
//RESIZE THAT CURRENT PIXEL AND MOVE IT TO THE NEW IMAGE DATA RESIZED
//SO EVERYTHING IS DONE NICE AND CLEAN IN THIS LOOP WITHOUT THE
//GETIMAGEDATA LATER AND MAYBE SET TRANSPARENT PIXELS WHILE I'M AT IT
}
}
I can't figure out the MAGIC part.
Thank you for reading!
Why not just use the built-in drawImage combined with image smoothing disabled? Doing this operation in a loop is not only relative slow but also prone to errors (as you already discovered).
Doing it the following way will give you the "pixel art" look and will also preserve the alpha channel:
var factor = 4; /// will resize 4x
offtx.imageSmoothingEnabled = false; /// prefixed in some browsers
offtx.drawImage(imageSource, offsetX, offsetY, width, height,
0, 0, width * factor, height * factor);
Here is an online demo.
Try using this library I recently made which can load an image, resize it fixed width & height or precentage.
It does exactly what you need, and much more like converting canvas to base64, blob, etc...
var CanvaWork = new CanvaWork();
CanvaWork.canvasResizeAll(obj.canvas, function(canvases){
// "canvases" will be an array containing 3 canvases with different sizes depending on initial options
});
https://github.com/vnbenny/canvawork.js
Hope this helps you!