PhotoFrame

by jmjpro

HTML

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="radio-inline">
    <label class="radio-inline">
        <input type="radio" name="imageRadio" id="optionsRadios1" value="option1">
        <img id="image1" width="100" src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" alt="darth vader">
    </label>
</div>
<div class="radio-inline">
    <label class="radio-inline">
        <input type="radio" name="imageRadio" id="optionsRadios2" value="option2">
        <img id="image2" width="100" src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg" alt="Yoda">
    </label>
</div>
<div class="clear"></div>
<div class="radio-inline">
    <label class="radio-inline">
        <input type="radio" name="frameRadio" id="optionsFrameRadios1" value="option1">
        <img id="frame1" width="100" src="http://gallery.yopriceville.com/var/resizes/Frames/Classical_Horizontal_Transparent_Frame.png?m=1365717600" alt="frame">
    </label>
</div>
<div class="radio-inline">
    <label class="radio-inline">
        <input type="radio" name="frameRadio" id="optionsFrameRadios2" value="option2">
        <img id="frame2" width="100" src="http://premiumfoto.ru/wp-content/uploads/2014/06/rama-lepninoj.png" alt="frame">
    </label>
</div>
<div class="clear"></div>
<button type="button" class="btn btn-primary" id="preview">Preview</button>
<div class="clear"></div>
<img id="room" style="display:none" width="500" src="http://static.imagekind.com/img/wallPreview.jpg" alt="frame">
<canvas id="previewCanvas" width="500" height="450"></canvas>
<button type="button" id="displayInside" class="btn btn-primary hidden">Display inside the photo</button>
<div class="clear"></div>
<canvas id="roomCanvas" width="800" height="600"></canvas>

CSS

body {
    margin: 0px;
    padding: 0px;
}
.clear {
    clear:both;
    margin: 5px;
}
.hidden {
    display: none;
}

JavaScript

$(document).ready(function () {
    $("#preview").click(function () {
        if ($("input:radio[name=imageRadio]:checked").length === 0 || $("input:radio[name=frameRadio]:checked").length === 0) {
            alert("You didn't select a frame or an image");
        } else {
            //show the display in a photo button
            $("#displayInside").removeClass("hidden");

            var previewCanvas = document.getElementById("previewCanvas");
            var ctx = previewCanvas.getContext("2d");
            var img = $("input:radio[name=imageRadio]:checked").parent().find("img")[0];
            var frame = $("input:radio[name=frameRadio]:checked").parent().find("img")[0];

            //clear before draw            
            ctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height);
            ctx.drawImage(img, 50, 50, 400, 350);
            ctx.drawImage(frame, 0, 0, 500, 450);

        }
    });

    $("#displayInside").click(function () {
        var img = $("input:radio[name=imageRadio]:checked").parent().find("img")[0];
        var frame = $("input:radio[name=frameRadio]:checked").parent().find("img")[0];
        var room = document.getElementById("room");
        var roomCanvas = document.getElementById("roomCanvas");
        var roomctx = roomCanvas.getContext("2d");
        //clear before draw
        roomctx.clearRect(0, 0, roomCanvas.width, roomCanvas.height);
        roomctx.drawImage(room, 0, 0, 800, 600);
        roomctx.drawImage(img, 430, 90, 150, 100);
        roomctx.drawImage(frame, 400, 70, 200, 150);

    });


    //intial draw of an empty room
    var room = document.getElementById("room");
    var roomCanvas = document.getElementById("roomCanvas");
    var roomctx = roomCanvas.getContext("2d");

    roomctx.drawImage(room, 0, 0, 800, 600);
    //roomctx.drawImage(img,430,90,150, 100);
    //roomctx.drawImage(frame,400,70,200,150);


});