Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Image / Javascript

Save HTML DIV As An Image With Save As Pop Up

Post a Comment
I want to make a web app which makes comics. It's very basic and I don't know Canvas very well. The user can upload 2 images and they appear in two divs. Then these divs are in one

Solution 1:

Yes, you can easily use canvas to combine your cartoon image with the user’s images.

Here’s how to create a canvas on the fly and combine all the images:

// create a temporary canvas and size it
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=awindow.width;
canvas.height=awindow.height;

// draw all 3 images into 1 combined image
ctx.drawImage(back,0,65);
ctx.drawImage(person,0,0,person.width,person.height,200,125,71,200);
ctx.drawImage(awindow,0,0);

// save the combined canvas to an image the user can download by right-clicking
var result=document.getElementById("composition");
result.src=canvas.toDataURL();

Since you're using images from different domains, I assume you've already worked through any CORS issues. You might have to bounce the images off your server.

enter image description here

This example fiddle must be viewed with Chrome or Firefox (IE throws a CORS violation):

http://jsfiddle.net/m1erickson/5JTtd/

Here is example code: 

<!doctype html>
<html>
<head>
<link  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; padding:15px; }
    canvas{border:1px solid red;}
    #sources{border:5px solid blue; padding:15px; width:380px;}
    p{ margin:15px 0;}
</style>

<script>
$(function(){

    var back=new Image();
    back.onload=function(){ draw(); }
    back.crossOrigin = "Anonymous";
    back.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/SPback.png";

    var person=new Image();
    person.onload=function(){ draw(); }
    person.crossOrigin = "Anonymous";
    person.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/person.png";

    var awindow=new Image();
    awindow.onload=function(){ draw(); }
    awindow.crossOrigin = "Anonymous";
    awindow.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/window.png";

    var count=0;
    function draw(){
        count++;
        if(count<3){ return; }

        var canvas=document.createElement("canvas");
        var ctx=canvas.getContext("2d");
        canvas.width=awindow.width;
        canvas.height=awindow.height;

        ctx.drawImage(back,0,65);
        ctx.drawImage(person,0,0,person.width,person.height,200,125,71,200);
        ctx.drawImage(awindow,0,0);
        var result=document.getElementById("composition");
        result.src=canvas.toDataURL();
    }

}); // end $(function(){});
</script>

</head>

<body>
    <p>Source images</p>
    <div id="sources">
        <img id="front" src="window.png" width=150 height=105>
        <img id="middle" src="person.png" width=48 height=133>
        <img id="back" src="spback.png" width=150 height=105><br>
    </div>
    <p>Combined result exported from canvas</p>
    <p>To Save: Right-click and Save picture as...</p>
    <img id="composition">
</body>
</html>

Post a Comment for "Save HTML DIV As An Image With Save As Pop Up"