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, Jan 21 '14 at 09: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): http://jsfiddle.net/jessrichman/8wg8e/#&togetherjs=b4CeLxOvvG — Jess Richman, Jan 21 '14 at 09:39

score 0 · Answer 1 · edited May 23 '17 at 10:25

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 '17 at 10:25

Community

1
1

answered Jan 21 '14 at 09:21

Mark Redman

24,079
20
92
147

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. – Jess Richman Jan 21 '14 at 09:41
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. – Mark Redman Jan 21 '14 at 09:48

score 0 · Answer 2 · answered Jan 21 '14 at 18:13

@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>

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

2 Answers2