0

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

这个页面可以做到这一点，但它可以在 Flash 中运行！

请不要给负面评价或说它是可能的副本或其他东西！我已经在网上找到了几个小时的解决方案。Canvas2Image 和 Html2Canvas 不适合我，因为我不使用画布。我还尝试了使用 html2canvas 将 div 捕获到图像中的“Joel Schlundt”答案使用那个。请告诉一个可能的解决方案，或者我如何使该 div 作为图像自动进入画布，然后将该画布保存为图像。

4

1 回答 1

3

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

以下是动态创建画布并组合所有图像的方法：

// 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 问题。您可能必须将图像从您的服务器上退回。

在此处输入图像描述

必须使用 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>
于 2013-06-01T17:26:05.200 回答