I need an image that is drawn in html5 canvas to look like a gif image (make it have 256 colors only). Is there any function that makes canvas have only 256 or less colors and make it convert images that are placed into it have only 256 or less colors?
Thanks in advance
I'm not sure there is such a method in the 2D context of the canvas.
However, it does not seem to be very complicate. 256 colors = 8 levels of red, green and blue.
So you can convert the image to respect this rule.
To achieve this, you need to change the color of each pixels.
Whad I'd do is to create a temporary canvas to manipulate the image, something like this (not tested):
//create copy of the image in a temporary context
this.tmpCanvas = document.createElement('canvas');
this.tmpCanvas.width = myIMage.width;
this.tmpCanvas.height = myIMage.height;
var scaledContext = this.tmpCanvas.getContext('2d');
scaledContext.drawImage(myIMage, 0, 0, myIMage.width, myIMage.height, 0, 0, myIMage.width, myIMage.height);
//get image data
imageData = scaledContext.getImageData(0, 0, myIMage.width, myIMage.height);
//loop over copied image date and modifiy pixels value
for(var i = 0; i < imageData.length; i += 4) { // 4 because RGBA
//red component
imageData[i] = Math.round(imageData[i] / 64);
//green component
imageData[i + 1] = Math.round(imageData[i+1] / 64);
//blue component
imageData[i + 2] = Math.round(imageData[i+2] / 64);
}
scaledContext.putImageData(imageData, 0, 0);
I didn't test this code, but the idea is there
Related
I was wondering if it is possible to have a coloured canvas in HTML5 and then save it as a black and white (grayscale) PNG, while you click on the save button. I managed to save the canvas as a PNG already, which is great! But I'd like to add the grayscale feature without having to change it myself with a program as Illustrator etc.
The canvas has moving particles btw. (I'm not sure if that has any effect though)
Thanks~!
function download(){
var dt = c.toDataURL('image/png');
this.href = dt;
};
downloadlink.addEventListener('click', download, false);
It's possible by extracting the RGB data from the canvas and calculate their luma values.
There are a couple of requisites that needs to be fulfilled though, like CORS (which does not seem to be a problem in this case as you can already save out an image) and if you wish to keep the original data after save you can either copy the current image on canvas to a temporary one, or keep a backup of the pixel data that needs to be extracted.
RGB to Luma
The formula for converting the RGB data into a luma value (grey) is as follows based on the REC 709 (or BT.709) formula:
luma = Red x 0.2126 + Green x 0.7152 + Blue x 0.0722
Alternatively you could use the REC 601 (BT.601) formula instead (which is more common for SD video footage):
luma = Red x 0.299 + Green x 0.587 + Blue x 0.114
To use this, simply iterate over all pixels, obtain the luma value using one of these formulas and replace all channels in target with the resulting luma value.
Temporary data
For temporary data we can do either (when save button is clicked):
Temporary canvas
Create a temporary canvas
Set the size equal to source canvas
Draw in source canvas using drawImage()
Extract target canvas' pixel data using getImageData()
Iterate over the pixels, convert using the formula, put data back
Save out image then discard temporary canvas
or
ImageData backup
Extract image data using getImageData() - this will act as our backup
Create new ImageData the same size using createImageData()
Iterate over the pixel from the backup, but put the result in luma into the created ImageData
Put back the created ImageData, save out image
Put back the backup data
If the latter step is necessary depends really on how you update the canvas. If you are animating a loop there may not be need to put back the backup (or keep one) if everything gets updated anyways, but if so and you see flash of grey or some areas left grey, then this step would be needed.
Example using the ImageData approach
var ctx = c.getContext("2d"), img = new Image;
img.onload = setup; img.crossOrigin = "";
img.src = "//i.imgur.com/OrYVGI8.jpg";
function setup() {
c.width = this.naturalWidth; c.height = this.naturalHeight;
ctx.drawImage(this, 0, 0); btn.disabled = false
}
// Main code for demo
btn.onclick = function() {
var idataSrc = ctx.getImageData(0, 0, c.width, c.height), // original
idataTrg = ctx.createImageData(c.width, c.height), // empty data
dataSrc = idataSrc.data, // reference the data itself
dataTrg = idataTrg.data,
len = dataSrc.length, i = 0, luma;
// convert by iterating over each pixel each representing RGBA
for(; i < len; i += 4) {
// calculate luma, here using Rec 709
luma = dataSrc[i] * 0.2126 + dataSrc[i+1] * 0.7152 + dataSrc[i+2] * 0.0722;
// update target's RGB using the same luma value for all channels
dataTrg[i] = dataTrg[i+1] = dataTrg[i+2] = luma;
dataTrg[i+3] = dataSrc[i+3]; // copy alpha
}
// put back luma data so we can save it as image
ctx.putImageData(idataTrg, 0, 0);
demo.src = c.toDataURL(); // set demo result's src url
// restore backup data
ctx.putImageData(idataSrc, 0, 0);
};
<button disabled id=btn>SAVE TO GREY</button> (click then scroll down to see result)<br>
<canvas id=c></canvas><br><img id=demo>
Or you could use ctx.globalCompositeOperation = 'luminosity' before drawing your image on a white filled canvas, not as fun but same result (:
I suggest calculating luma like this:
var luma = (11 * obj.data[i] + 16 * obj.data[i + 1] + 5 * obj.data[i + 2]) >> 5;
I want to draw text on a canvas in the inverse color of the background (to make sure the text is readible no matter the background color). I believe in oldskool bitblt-ing, this was an XOR operation.
How to do this?
Update: most of the newer browsers now support the blending mode "difference" which can achieve the same result.
context.globalCompositeOperation = "difference";
Updated demo.
Old answer:
One should think that the XOR mode for composition would do this, but unfortunately canvas' XOR only XORs the alpha bits.
By applying the following code we can however receive a result such as this:
You can make an extension to the canvas like this:
CanvasRenderingContext2D.prototype.fillInversedText =
function(txt, x, y) {
//code - see below
}
Now you can call it on the context as the normal fillText, but with a slight change:
ctx.fillInversedText(txt, x, y);
For this to work we do the following first - measure text. Currently we can only calculate width of text and then assume the height. This may or may not work well as fonts can be very tall and so forth. Luckily this will change in the future, but for now:
var tw = this.measureText(txt).width;
var th = parseInt(ctx.font, '10');
th = (th === 0) ? 10 : th; //assume default if no font and size is set
Next thing we need to do is to setup an off-screen canvas to draw the text we want ot invert:
var co = document.createElement('canvas');
co.width = tw;
co.height = th;
Then draw the actual text. Color does not matter as we are only interested in the alpha channel for this canvas:
var octx = co.getContext('2d');
octx.font = this.font;
octx.textBaseline = 'top';
octx.fillText(txt, 0, 0);
Then we extract the pixel buffers for the area we want to draw the inverted text as well as all the pixels for the off-screen canvas which now contains our text:
var ddata = this.getImageData(x, y, tw, th);
var sdata = octx.getImageData(0, 0, tw, th);
var dd = ddata.data; //cache for increased speed
var ds = sdata.data;
var len = ds.length;
And then we invert each pixel where alpha channel for pixel is greater than 0.
for (var i = 0; i < len; i += 4) {
if (ds[i + 3] > 0) {
dd[i] = 255 - dd[i];
dd[i + 1] = 255 - dd[i + 1];
dd[i + 2] = 255 - dd[i + 2];
}
}
Finally put back the inverted image:
this.putImageData(ddata, x, y);
This may seem as a lot of operations, but it goes pretty fast.
Demo (warning if you are sensitive to flicker)
(the psychedelic background is just to have some variations as fiddle needs external images and most are prevented by CORS when we use pixel manipulation).
I've removed my old answer, as it did not solve the question. As of recently, there are new globalCompositeOperations that do all kinds of great things. I've created an example that shows how to obtain inverted text. In case that link breaks, the method is essentially this:
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
//draw inverted things here
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
Is there any way to convert the image so it appears as a gray scale. Changing rgb is not working as required.
As you probably know, screen color consists of 3 components: red, green and blue. Each component or color (for example, red) has a value from 0 to 255. The value 0 indicates there is no red color and the value 255 would be the brightest possible red color. To convert a color to grayscale you just need to calculate the average for all three components. This can be done using the simple formula below:
grayscalecolor = (red + green + blue) / 3;
Canvas Method
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(>var y = 0; y < imgPixels.height; y++){
for(>var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
Microsoft Internet Explorer does not support the CANVAS tag, but Microsoft does provide image manipulation through filters. The filter to use for converting images to grayscale is the filter named DXImageTransform.Microsoft.BasicImage.
imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
If you're able to use HTML5 you could use a canvas, as seen here.
Google for "canvas grayscale image" the first link will be:
HTML 5 introduces Canvas object which can be used to draw and manipulate images. In this example, I used a Canvas to turn an image into grayscale. If your browser supports Canvas, you should see two images above: the normal image and the grayscale one. The grayscale one is not a separate image, it is generated by utilizing Canvas.
http://permadi.com/tutorial/jsCanvasGrayscale/index.html
If you want this to be done client side (on the browser) with a HTML you will need to use a Canvas. Example here: http://www.youtube.com/watch?v=QJa7tWScXS4
Use PaintbrushJS:
http://mezzoblue.github.com/PaintbrushJS/demo/
It lets you apply any number of filters including greyscale and works in most modern browsers. It's not a 'HTML' solution, that would not be possible without two images.
At least it works on most browsers, including ones which don't yet support HTML5.
is there any way to choose an area on the canvas by color and clip it?
I want to be able to clip an undefined aread that the only thing in common between all the pixels is that they all have the same color.
thanks
Live Demo
Below is a way to select a color.. and do whatever you want with it. I pass a color I want to find iterate over every pixel and remove the color that matches, since Im not sure what you meant by clipping I assumed you mean remove. However please note on large images this method will be slow.
// Takes an array with 3 color components, rgb
function removeColor(color){
var canvasData = ctx.getImageData(0, 0, 256, 256),
pix = canvasData.data;
for (var i = 0, n = pix.length; i <n; i += 4) {
if(pix[i] === color[0] && pix[i+1] === color[1] && pix[i+2] === color[2]){
pix[i+3] = 0;
}
}
ctx.putImageData(canvasData, 0, 0);
}
removeColor([0,0,255]); // Removes blue.
And like Simon pointed out the code above will get the exact color. Below will grab the approximate color, which is good if you have colors overlapping or very close to each other.
Demo 2 with approximation
What diffrent approaches exists out there in actionscript 3.0 ?
I found this library: mojocolors
But this is more for graphics-color I guess…
Thx
var n:Number = 1/3;
var matrix:Array = [n,n,n,0,0,
n,n,n,0,0,
n,n,n,0,0,
0,0,0,1,0];
var cmf:ColorMatrixFilter = new ColorMatrixFilter(matrix);
bitmap.filters = [cmf];
In general, assuming that you start with an RGB image, you convert it to HSI color space and use the I (intensity) component.
To convert an image to grayscale, you need to iterate over each pixel in the image buffer and average the R, G and B component into one entity, then duplicate it three times to get the new color. pseudo-code (assuming 8bit color):
for each pixel in buffer:
pixel.rgb = ((pixel.red + pixel.green + pixel.blue) / 3) * 0x010101;
I am sure you can do something with Adobe's PixelBender to achieve this faster.
Apply the filter created by this method to the DisplayObject that contains the image you want in black and white:
public static function createBlackAndWhiteFilter():ColorMatrixFilter {
var rLum:Number = 0.2225;
var gLum:Number = 0.7169;
var bLum:Number = 0.0606;
var bwMatrix:Array = [rLum, gLum, bLum, 0, 0, rLum, gLum, bLum, 0, 0, rLum, gLum, bLum, 0, 0, 0, 0, 0, 1, 0];
return new ColorMatrixFilter(bwMatrix);
}//createBlackAndWhiteFilter