CODEWITHSUNDEEP
javascriptimagecanvaspngsprite
user1086671
user1086671

Reputation: 65

How to unite 2 png images into 1 on client side using javascript?

So my client-side code recieves two PNG images. One of them is half-transparent. How can i overlay first image with the second one and convert it to third PNG file to use it later? It like using them as layers to make 1 PNG image. Is there any way to do it or any frameworks?

Upvotes: 1

Views: 667

Answers (2)

Loktar
Loktar

Reputation: 35319

Its really easy to do. You just need to use drawImage to draw the images onto the canvas in layers. As for saving, you use toDataURL which will return a base64 url for the image, which you can then do whatever with, open in a new window etc. However the images must come from the domain the code is running on in order to get the data url, or a security exception will be thrown. The jsfiddle example throws the security exception because Im pulling images from two random websites just as an example.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementsByTagName("img");

canvas.width = 400;
canvas.height = 400;
ctx.drawImage(image[0],0,0);
ctx.drawImage(image[1],0,0);

// will raise security exception if not from the same domain as the code.
var newImage = canvas.toDataURL();
​

Live Demo

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript. To learn more about the library, see the introduction page.

The main focus of CamanJS is manipulating images using the HTML5 canvas and Javascript. It's a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques. It is also completely library independent and can be safely used next to jQuery, YUI, Scriptaculous, MooTools, etc.

Upvotes: 0

Related Questions