Question

我想制作一个制作漫画的网络应用。这是非常基本的，我不太了解Canvas。用户可以上传2个图像，它们出现在两个div中。然后这些div与其他漫画元素在一个整体div中。我想要的是当用户点击一个按钮时，弹出一个“另存为”对话框，将整个div保存为图像。

This page这样做但它在flash中有效！

请不要评价否定或说它是可能的副本或其他东西！我已经在网上找了几个小时的解决方案。 Canvas2Image和Html2Canvas不适合我，因为我没有使用canvas。我也尝试使用capture div into image using html2canvas来回答“Joel Schlundt”。请告诉我一个可能的解决方案，或者我可以如何让div自动作为图像进入画布，然后将该画布保存为图像。

Answer 1

是的，您可以轻松使用画布将卡通图像与用户图像合并。

以下是如何动态创建画布并组合所有图像：

// 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();

由于您使用的是来自不同域的图像，我认为您已经解决了任何CORS问题。您可能需要从服务器上退回图像。

enter image description here

此示例小提琴必须使用Chrome或Firefox查看（IE会引发CORS违规）：

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

以下是示例代码：

<!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; 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>

保存HTML DIV作为图像，另存为弹出窗口

1 个答案: