HTML5 Canvas color 2 pngs that overlay each other and form dynamic url

Question

Thanks for the help in advance.

I am trying to create an image made up of two png's. 1. Would be the a base, such as a bracelet and 2. Would be a stone. The user would have two input fields or pre-determined radio buttons to change the color of the stone and base metal. Once finished, a dynamic url would be created to used to share the image.

For reference, use this previous posts answer where one input field changed the color of one png: How to change color of an image using jquery

I would like two do that twice, then have the two images merge two one everytime an input is updated.

Thanks again!

A jsfiddle would be appreciated in the responses to help demonstrate a working example. Thanks again. — Jess Richman
– Jess Richman, Commented Jan 21, 2014 at 9:19
This is a basic js of where the idea is at (the user would not see the first two images, they would just have the two inputs and see the final product): jsfiddle.net/jessrichman/8wg8e/#&togetherjs=b4CeLxOvvG — Jess Richman
– Jess Richman, Commented Jan 21, 2014 at 9:39

Community · Accepted Answer · 2017-05-23 10:25:55Z

0

Have you tried drawing two images on top of each other with DrawImage() the second one with transparency?

There is an example on this question: Drawing PNG to a canvas element -- not showing transparency

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Jan 21, 2014 at 9:21

Mark Redman

24.6k20 gold badges99 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jess Richman Over a year ago

appreciate the response. I saw the DrawImage example, however I am not sure how that would exactly work, as I am trying to have it dynamic and use high quality png's and maintain them.

Mark Redman Over a year ago

If you want to use the canvas,use DrawImage to draw the background, then use DrawImage again to draw the foreground (updated based on user input or selection of ine or more images)? if the foreground image is transparent it will merge the images as required? To Share the image you may need to also read in defaults from the url.

markE · Accepted Answer · 2014-01-21 18:13:25Z

@Mark Redman certainly has the right idea:

Draw a gem-with-transparent-background over your metal setting.

This is what the gem images might look like:

enter image description here

Demo of customer-selected gems drawn on top of a pendant setting: http://jsfiddle.net/m1erickson/U8Z2g/

enter image description here

After the user has selected their gemstone, you can save the canvas to a .png image url like this:

var pngURL = canvas.toDataURL();

And here's what the code might look like:

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; } #canvas{border:1px solid red;} button{display:none;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); // image loader var imageURLs=[]; // put the paths to your images here var imagesOK=0; var imgs=[]; imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pendant.jpg"); imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/purpleCZ.png"); imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stack1/pinkCZ.png"); loadAllImages(); function loadAllImages(callback){ for (var i=0; i<imageURLs.length; i++) { var img = new Image(); imgs.push(img); img.onload = function(){ imagesOK++; if (imagesOK>=imageURLs.length ) { $("button").show(); } }; img.onerror=function(){alert("image load failed:"+this.src);} img.crossOrigin="anonymous"; img.src = imageURLs[i]; } } $("#purple").click(function(){ draw(1); }); $("#pink").click(function(){ draw(2); }); function draw(index){ var stone=imgs[index]; ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(imgs[0],0,0,800,800,0,0,300,300); ctx.drawImage(stone,0,0,stone.width,stone.height,108,134,stone.width*1.24,stone.height*1.24); } }); // end $(function(){}); </script> </head> <body> <button id="purple">Purple</button> <button id="pink">Pink</button><br> <canvas id="canvas" width=300 height=300></canvas> </body> </html>

Collectives™ on Stack Overflow

HTML5 Canvas color 2 pngs that overlay each other and form dynamic url

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related