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 itvar 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-clickingvar 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><linktype="text/css"media="all"href="css/reset.css" /><!-- reset css --><scripttype="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:15px0;}
</style><script>
$(function(){

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

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

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

    var count=0;
    functiondraw(){
        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><divid="sources"><imgid="front"src="window.png"width=150height=105><imgid="middle"src="person.png"width=48height=133><imgid="back"src="spback.png"width=150height=105><br></div><p>Combined result exported from canvas</p><p>To Save: Right-click and Save picture as...</p><imgid="composition"></body></html>

Post a Comment for "Save Html Div As An Image With Save As Pop Up"