I want to replace image pixel color with other color in webos. so can any one suggest how i do this.
Thanks
This can be done by using the HTML5 canvas API. Create a canvas the size of the image, and then draw the image into the canvas. Get the image data, and manipulate away!
var canvas = document.getElementById(canvasID);
var context = canvas.getContext('2d');
var image = context.getImageData(0,0,canvas.width,canvas.height);
image is now an imageData object, which contains an array data, which contains all pixels of the image.
Suppose you wanted to remove the green component at the pixel in the sixth column and the third row.
var index = (5*image.width+2)*4;
//six columns of pixels, plus two for the third row.
//Multiply by four, because there are four channels.
image.data[index+1] = 0; //Plus one, because we want the second component.
Once your pixel manipulation is done, load the image data back into the canvas.
context.putImageData(image);
Related
So i'm trying to do a simple photo collage creator and i'm generating the layouts through canvases, let's say i want 4 images, two on each row, so i'm creating 4 canvases. On each of them i have the drop event set so i can load images.
After the images are loaded, you can save the "collage", what i want to do is to get my body background image which is a lorem ipsum random image and draw it on the final canvas as the background.
I got the data from the image, i can see the background on the new canvas, but when i try to save it it doesn't show at all, here is a part of my code:
var imgBackground=new Image();
var imgBgCanvas = new Image();
imgBackground.onload = function() {
//the getDataUrl creates one canvas and i draw the image on it then return the result with .toDataUrl("image/jpeg")
imgBgCanvas.src=getDataUrl(imgBackground);
}
imgBgCanvas.onload= function() {
//callback to load the image on my canvas, contextColaj is the context of the final canvas
contextColaj.drawImage(imgBgCanvas,0,0,500,500);
}
imgBackground.crossOrigin="Anonymous";
imgBackground.src=$("body").css("background-image").split('"')[1];
After this i draw the rest of the canvases on this new canvas, then i return the data to another function that calls the save function.
//this is how i draw the canvases, c1 represents the first one but let's say we have four of them, they all show in the final canvas
contextColaj.drawImage(c1, 0, 0, 250, 250);
//the return
colaj.toDataURL("image/jpg",1.0);
So why are every other canvas images work, they show on the saved file, but the background image is not? If i put them on an image and append them to the body they show up, even the canvas if it's showed on the body has the background image on it.
I am building a retro styled game, that uses pixelated images. I have not yet created these images, because I wanted to know the best way of doing things.
These images will probably be a 16 or 32 PX square, but I would like to be able to scale the images as big as I like, just without any blur/distortion.
What format should I use? And how should I import them to my canvas. as well?
EDIT#1: Fixed typo & put Q back on topic. (Thank you Spence for pointing it out)
Try "Inkscape", its free
https://inkscape.org/en/
it uses SVG format (scalar vector graphics) so you will be able to scale the images as big as you like, just without any blur/distortion.
The only way to enlarge without any blur or distortion is turn each 1 pixel into a set of 2x2, 3x3, ... pixels.
For example, a single blue pixel in the top-left of the image would become a set of 4 blue pixels at [0,0], [1,0], [0,1] & [1,1]. And the same for every other pixel on the original image. The resulting image would be twice the width & height of the original image.
Since your graphics style is pixelated images, this adjustment would preserve your pixilation while also enlarging the original image.
You can code a function that uses an in-memory html5 canvas to "resize-by-multiplying" your original images as needed. This will use canvas's ability to set the RGBA values every pixel using context.getImageData and context.putImageData.
CanvasContext2d does have an option to disable the image smoothing : imageSmoothingEnabled which is set to true by default.
According to the specs, if set to false,
The image [drawn by drawImage() method] must be rendered using
nearest-neighbor interpolation.
This algorithm is the same as the one proposed by #markE in his answer.
Unfortunately, browsers still use vendor-prefix for this attribute and it wasn't implemented in both IE9 and IE10...
var img = document.querySelector('img'),
canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d');
// draw the image
img.onload = function(){
canvas.width = img.width*50;
canvas.height = img.height*50;
// disable smoothing after we change canvas' width/height
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, 0,0, canvas.width, canvas.height);
}
//32x32px image taken from https://stackoverflow.com/q/31910043/3702797
img.src="http://i.stack.imgur.com/3Sp5x.png"
canvas{border:.5px solid}
<img/>
<canvas></canvas>
Scroll to see the resized image in canvas
Create large icon images to which you apply a 16x16 or 32x32 tile effect. Then when you write them to the canvas (after loading the images of course) scale them down to the size you want using
context.drawImage(img,x,y,width,height);
File sizes are unlikely to jump greatly since each tile should compress fairly easily.
How to use getImageData() in js, when the images are drawn into the canvas on top of one another? (I need the data of each image separately.)
Here's one way:
// get the imageData for the second image
context.drawImage(secondImage,0,0);
var imageData2=context.getImageData(0,0,canvas.width,canvas.height);
context.clearRect(0,0,canvas.width,canvas.height);
// get the imageData for the first image
context.drawImage(firstImage,0,0);
var imageData1=context.getImageData(0,0,canvas.width,canvas.height);
// and now redraw the second image back on the canvas
context.drawImage(secondImage,0,0);
Or simply create a canvas object for each image. They will visually layer correctly but you can work with image independently. If you don't mess with the z-index they will render in the order you add the canvas objects.
In my webapplication the user can take a photo with the camera on his mobile device. The photo is then displayed in a canvas.
<canvas id="photo" ></canvas>
Now I want to send the photo to a backend server. The best way to do this seems to be encoding the image to a base64 string.
However, I want the photo to always be the same resolution, for example 100 x 100 pixels. Otherwise the base64 string is too big.
I am currently using the second parameter of toDataURL to determine the export quality of the picture. (here 2%).
var base64 = document.getElementById("photo").toDataURL("image/jpeg", 0.02);
This does not seem to be a good way because I don't know the initial resolution of the photo. So I would like to always get the photo in the same resolution. How to achieve this?
You could use an invisible background canvas with a size of 100x100 and copy the image from the photo-canvas to it. The drawImage function allows you to specify a size for the destination rectangle. When it's not the same as the source rectangle, the content will be scaled:
// Create a temporary, invisible 100x100 canvas
var tmpCanvas = document.createElement('canvas');
tmpCanvas.width = 100;
tmpCanvas.height = 100;
var tmpContext = canvas.getContext('2d');
// copy the content of the photo-canvas to the temp canvas rescaled
var photoCanvas = document.getElementById("photo");
tmpContext.drawImage(photoCanvas, // source
0, 0, photoCanvas.width, photoCanvas.height, // source rect
0, 0, 100, 100 // destination rect
);
// get data-url of temporary canvas
var base64 = tmpCanvas.toDataURL("image/jpeg");
But keep in mind that when the source-canvas isn't rectangular, the aspect ratio won't be preserved. When you don't want this, there are different ways to deal with this issue, like cropping or adding a border. Most of these would be implemented by choosing different source- or destination rectangles in the drawImage call.
For a Project I want to take the content of a canvas (Called SAVE_CV) and display it in another, smaller canvas.
Some things that I am aware of so far that could be causing me problems: resizing a canvas clears its content, the JS-size of a canvas is different from the CSS-size.
I want the smaller canvas to be 500px wide and appropriately high.
function restoreTaggingCV() {
var cv = document.getElementById( 'taggingCV' );
var ctx = cv.getContext( "2d" );
var styleHeight = SAVE_CV.height * 500 / SAVE_CV.width;
ctx.drawImage(SAVE_CV, 0, 0, cv.width, cv.height);
}
This is my Code so far. Whenever I try to resize the smaller canvas appropriately it only gives me a blank canvas with nothing in it. I tried to set the size with "cv.height = X" and "cv.style.height = styleHeight + 'px'" but neither worked. Also I would love to set the width of the canvas using CSS.
Appreciate any help.
EDIT
I want the image in a picture because later I want the user to mark areas in the smaller version which I then want to use to create individual imaged from the big version. I want to visualise thise area to the user. I probably could do all this by using an image and putting divs over it or something but I just fell more comfident using a canvas since I am pritty new to HTML and CSS.
Try using the CanvasRenderingContext2d.prototype.scale method. It sets the scale factor of the canvas and renders anything in the current state with it's dimensions multiplied by the factor.
So before you use the drawImage function, you scale the context appropriately (in this case, down). For example:
context.save();
context.scale(0.5, 0.5);
context.drawImage(canvas, 0, 0);
context.restore();
This would render the canvas on the context at 0.5 times it's current size. See in this fiddle how I used it to mirror a larger canvas onto a smaller, separate one.
Canvas objects don't like to be resised. After drawing Your image simply convert it toDataURL() and set as image source. They You may resize image as you want.
$img.attr('src',canvas.toDataURL());