pass image to a div from another div in a same web page when press a button

Question

this is my code

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="html2canvas.js"></script>
        <script type="text/javascript">
$(function() { 
    $("#btn").click(function() { 
        html2canvas($("#img_load"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);


                Canvas2Image.saveAsPNG(canvas); 
                $("#img_preview").append(canvas);

            }
        });
    });
}); 

        </script>
    </head>
    <body>
        <div id="img_load">
            <img id="test" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" style="width: 200px; height: 200px;"/>  
        </div> 
        <button id="btn" type="button">OK</button>
        <div id="img_preview" style="border: 1px solid black; width: 200px; height: 200px;">
            <canvas id="myCanvas" width="200" height="100"></canvas>
        </div>
    </body>

when I press the "OK" I want to send that image to my "img_preview" div. but it create new cavas instead going to that div. plz help me to fix that..

Are you missing reference to `Canvas2Image' ? – Muhammed Shevil KP Oct 01 '15 at 07:03 — Muhammed Shevil KP, Oct 01 '15 at 07:03

score 0 · Accepted Answer · answered Oct 01 '15 at 05:42

You can do this without using canvas also. Following is the full working code.

<html lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#btn').click(function(){
            $('#img_preview').html('<img src="' + $('#test').attr('src') + '" />');
        });
    });
    </script>
</head>
<body>
    <div id="img_load">
       <img id="test" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" style="width: 200px; height: 200px;"/>  
    </div> 
    <button id="btn" type="button">OK</button>
    <div id="img_preview" style="border: 1px solid black; width: 200px; height: 200px;">
    </div>
</body>
</html>

this code work 100%. Thanx Suyog. but there is a problem, I have a image customize part inside this code which I didn't mentioned, this code only send original photo. How can I send that customized image? — wtharin, Oct 01 '15 at 06:21

score 0 · Answer 2 · answered Oct 01 '15 at 05:53

0

It is creating a new canvas since you are appending it , replace as

from

$("#img_preview").append(canvas);

to

$("#img_preview").html(canvas);

answered Oct 01 '15 at 05:53

Rohit Kumar

1,948
1
11
16

score 0 · Answer 3 · edited May 23 '17 at 11:51

Unfortunately, you can't possibly grab a canvas of that image since the it is from external server and that's a security feature.

Security Error with canvas.toDataURL() and drawImage()

however, you can do it this way.

<html>
<head>

<script type="text/javascript">
$(function () {

    $("#btn").click(function () {
        html2canvas($("#img_preview"), {
            onrendered: function (canvas) {

                //theCanvas = canvas;
                //document.body.appendChild(canvas);
                //Canvas2Image.saveAsPNG(canvas); 

                var c = document.getElementById("myCanvas");
                var ctx = c.getContext("2d");
                var img = document.getElementById("test");

                var x = 0;
                var y = 0;
                var width = 200;
                var height = 200;

                ctx.drawImage(img, x, y, width, height);

            }
        });
    });
});

</script>
</head>
<body>
    <div id="img_load">
        <img id="test" src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" style="width: 200px; height: 200px;" />
    </div>
    <button id="btn" type="button">OK</button>
    <div id="img_preview" style="border: 1px solid black; width: 200px; height: 200px;">
        <canvas id="myCanvas" width="200" height="200"></canvas>
    </div>
</body>

See Working Sample of this here: https://jsfiddle.net/copaq6ch/29/

Hope this help! Happy Coding!

pass image to a div from another div in a same web page when press a button

this is my code

3 Answers3