I have to objects. One of them is PNG formatted image frame and the other is just an JPG formatted image.
When I drag the JPG formatted image to PNG formatted frame, (jQuery's drag and drop function) my JPG formatted image overflows through PNG formatted frame. I dont want JPG image to overflow through my PNG frame. How can I overcome it?
I'm uploading an image that you'll understand my problem easily..
Assuming HTML5 Canvas is allowed:-
Create a new canvas in script and get the 2d context.
drawImage to the context your JPG image.
Create a second canvas for your frame and get its 2d context.
drawImage your PNG to this second canvas.
Call getImageData on both contexts to get two arrays of bytes in RGBA order.
Process each pixel by checking the alpha on the second canvas and combining RGB as required.
Call putImageData to save the result back to the context.
You can then drawImage the canvas you wrote to in other script, or use canvas.toDataURL("image/png") to get a src url.
There are well-supported canvas and SVG solutions, as well as bleeding edge support for CSS Masks.
Related
I have created a web application which uses an HTML5 canvas element to allow users to draw in various shapes, colors, line widths. They can also upload an image, have it drawn onto the canvas and then draw on top of that, as a way to annotate their images.
My challenge is that I am using .toDataURL() to get the entire contents of the canvas saved as an image. As I understand, though, this can only capture the size of the canvas. On smaller devices (phones), the image which is saved, ends up quite small dimensions. Here's what I am doing to get what is on the canvas:
var image = document.getElementById("drawingCanvas").toDataURL("image/jpeg", 1.0);
image = image.replace('data:image/jpeg;base64,', '').replace('data:image/png;base64,', '');
Is there some way to set up my canvas to be able to save larger images, even if the size of the canvas is quite small, due to the device?
Sure...
Save the commands used to create the client's drawing.
Create a larger in-memory canvas with document.createElement.
drawImage a full-sized image to the canvas.
context.scale the canvas.
Re-issue the drawing commands.
Export the enlarged canvas with .toDataURL.
Thanks to context.scale you don't have to change any of the coordinates of the drawing commands.
...and alternatively...
You could eliminate step#1 if you're willing to downgrade the drawings to allow some "jaggies". Do this by using CSS to overlay a canvas on top of the client's img. That way the client's drawings are already isolated on the original canvas. Then your procedure simplifies to:
Create a larger in-memory canvas with document.createElement. Make sure the larger canvas has the same aspect ratio as the original canvas.
drawImage a full-sized image to the canvas.
drawImage the original smaller canvas to the larger canvas. You can use the extended version of drawImage to simultaneously scale the client's drawings: context.drawImage(originalCanvas, 0, 0, originalCanvas.width, originalCanvas.height, 0, 0, largerCanvas.width, largerCanvas.height). Yes, the image source for drawImage can be another canvas. ;-)
Export the enlarged canvas with .toDataURL.
As the title says, i want to add background pattern to a png image(not the whole canvas). I tried various guides but they are all about adding background pattern to whole canvas by either using background-image css property or by using canvas's createPattern method.
This is what i'm creating.
As you can see, there are various png images on the canvas(left arm, right arm, body, etc.) and they are all customizable. Now i want to add repeat-pattern to those png images. Those repeat pattern would be an image itself.
How to do that via svg, fabric or any other method?
A really simple way is to create a FOR loop to draw your PNG images at the size you need.
Use the canvas width/height values,your image size and your preferred image distance to determine
the number of iterations your loop needs to run.
On each iteration increment a distance variable a certain value in
order to blit your image at an increasing distance on the x/y axis.
When the loop ends you will have a pattern.
I have HTML5 canvas drawing app and I need to change it's background color when user clicks a button.
Background-color on canvas is working on user-side, but user can save the image to server and I'm exporting canvas data using canvas.toDataURL('image/png'). Problem is, background color of canvas is not included, it only sends data user drawn.
I thought about putting big retangle over whole canvas, but that overwrites all drawings already made. Any ideas?
If you want to add the background after you already have drawn something on the canvas, you could add another canvas with the same size and with "display:none" - then, before sending the image, just fill the temporary canvas with your main canvas element's background color from the CSS, then draw the main canvas onto the temporary one.
Finally, send to server the composite from the temporary canvas rather than the bitmap of the main canvas that has the transparent background.
You're not showing any code, but: You need to draw the background using it's context. Setting the background using CSS will as you already discovered not include it when you extract the image.
Canvas is simply put two parts: the canvas element itself and its bitmap. Using CSS affects the element but not the bitmap. Therefor, you need to update the bitmap usually through its context or using the pixel buffer for it to become a part of the bitmap.
Do the following:
At initialization, draw the background using for example fillRect()
Draw your remaining graphics on top
Extract using toDataURL()
Using stage.toDataURL() in KineticJS, a JPEG image can be generated.
Problem: The generated image has to be cropped into a smaller image and saved onto the web server. Is there a way to crop the stage so that the data uri created by stage.toDataURL() is the final cropped image? Or do I have to crop it on the server side?
You can create another offscreen canvas that will be used for the cropping. Then draw the main canvas to that cropping canvas and crop as necessary before calling toDataURL.
What I am trying to make is some kind of scrollable viewport in which a really large image is loaded (as in 10.000 x 10.000 pixels or more) and I should be able to draw some lines / shapes on this image.
There are two methods I can think of to draw the image / allowing the shapes to be drawn:
Using an tag to draw the image and draw a canvas the size of the image above it.
Using the drawImage() method to draw the image and just use a canvas.
I have tried both cases but when I load an image (in the img tag or using the javascript Image() object) it consumes about 500MB of memory.
I am wondering if there is a more efficient way to accomplish this.
Never ever make a user download an image that size unless you absolutely have to.
Make 100 smaller tiles (or thereabouts) of the image and draw the tiles to the Canvas, only drawing the tiles that can be seen at the current time (like google maps, etc do).