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.
Related
I have a canvas that is edited by a user (some drag and drop stuff), and it has some instructions printed in text on it. I want to save the image without that text.
I am using KeneticJS. The size will always be the same and the text is at the bottom of the image, so I was thinking if I could just crop that out that would work fine. I am passing the image as a dataURL to my solution, is it possible to crop the image before sending it as a data url?
It would be great if I could just say dataURL.crop(height, width); or something.
Here is my code which, on button press, sends the image as a data url to my filemaker solution.
bGroup.on('click touchstart', function(){
stage.toDataURL({
callback: function(dataUrl) {
var myParam = encodeURIComponent(dataUrl.split(',').pop());
theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done¶m=' + myParam;
window.location= theURL;
bDone.fill('green');
buttonLayer.draw();
}});
});
There's no direct way of clipping your text, but it's not difficult:
Create an image from the dataURL (or use the texted image if you still have access to it).
Create a new in-memory canvas: document.createElement('canvas');
Resize the canvas to your desired clipped size: canvas.width=10; canvas.height=10;
Draw the image from #1 onto the canvas: context.drawImage
The text at the bottom of the image will automatically be clipped since the in-memory canvas is smaller than the incoming image.
Pull the dataurl of the in-memory canvas: canvas.toDataURL
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.
Is there a way to clear the canvas (html5)of only 1 element only ? I have a moving image on a canvas and when I erase the image the background color goes as well. Is there a way to just remove the image and not the whole background. My background is just a simple color but in the future it will be more complicated.
This is also tricky because there is no way to get image x,y pos from a property.
ClassLoadImages.prototype.m_move = function(){
this.x=++img1_x;
this.y=++img1_y;
//img1_x++;
//img1_y++;
// alert(img.x);
ctx.drawImage(img.imgElement, this.x, this.y);
// ctx.fillText("finished loading " ,10,40);
};
function doGameLoop() {
ctx.clearRect(0,0,600,400);
img.m_move();
if (img.x>30)
{
clearInterval(gameLoop);
}
}
var img= new ClassLoadImages('images/image4.jpg');
gameLoop = setInterval(doGameLoop, 100);
</script>
Simple answer is no. A canvas is a flat bitmap, not a layered collection of objects. Once you draw to it you lose the background behind the thing you draw.
You could try to implement the functionality yourself by recording the steps you used to create the canvas in the first place, and re-creating it with or without the relevant image.
I want to draw an image to canvas and then allow user to draw some sketch on it by sketch.js. Now the situation is:
1.the image has been drawn on the canvas successfully
2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)
so, I've made both functions right, but I'm confused about the part in between. I hope to draw the sketch on the canvas with the image on it. Here is my code:
index.html:
<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>
canvas.js:
var mysketch = jQuery("#mysketch");
// draw the captured image to canvas
var displayImage = function() {
var context = mysketch.get(0).getContext("2d");
var image = new Image();
image.onload = function() {
context.drawImage(image, 0, 0);
}
// prepend the required image info again
image.src = dataURL;
// call sketch.js to draw sketch on the canvas
mysketch.sketch({defaultColor: "#ff0"});
}
I think that, on your call to sketch method
sketch.js is clearing the canvas first then allows you to draw something on it.
As you can see in the link here, in the 3rd example (i.e. Tools Example) the image is not drawn by drawImage method.
It is actually the background of the canvas which will always be there as background, whatever you draw on it.
So what you can do is:
either do same thing as in the example i.e. set your image as background,
or make a new canvas just behind your canvas with same width, height and on same location and draw your image on it. and do your sketch thing on the second one.
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);