如何将多个画布保存为一张图片

Question

我想使用asp.net将多个画布保存为一个图像。我尝试了两个画布，但保存失败。

画布：

    <div style="position:relative; width:456px; padding:0px; margin:0px;">
    <canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0;   top: -220px; z-index: 0;"></canvas>
    <canvas id="layer2" width="456" height="480" style="position: absolute;left: 0;   top:-220px; z-index: 1;"></canvas>    
   </div>


 <input type="button" id="btnSave" style="width:150px ; text-align:center;height:30px" name="btnSave" value="Save as Image!" />

Jquery：

<script type="text/javascript">
     // Send the canvas image to the server.
     $(function () {
         $("#btnSave").click(function () {

             can1 = document.getElementById("broadcanvas");
             ctx1 = can1.getContext("2d");
             var coll = document.getElementById("layer2");
             ctx1.drawImage(coll, 0, 0);
             var image = can1.toDataURL("image/png");   

             alert(image);
             image = image.replace('data:image/png;base64,', '');
             $.ajax({
                 type: 'POST',
                 url: 'index.aspx/UploadImage',
                 data: '{ "imageData" : "' + image + '" }',
                 contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (msg) {
                     alert('Image saved successfully !');
                 }
             });
         });
     });
</script>

index.aspx.cs：

using System.IO;
using System.Web.Script.Services;
using System.Web.Services;

[ScriptService]
public partial class index : System.Web.UI.Page
{
    static string path = @"E:\Green\images\\";
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    [WebMethod()]
    public static void UploadImage(string imageData)
    {
       string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
       using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
        {
           using (BinaryWriter bw = new BinaryWriter(fs))
             {
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
             }
         }
     }
}

- Anish

---

看看这个是否有帮助：https://dev59.com/3W865IYBdhLWcg3wkfYW - ksskr

@ksskr 是的，我可以得到它，但我想知道我们如何在这里集成那些解释。我尝试了他们的方法，但它没有显示输出。 - Anish

Answer 1

为了使这段代码正常工作，您需要完成以下操作：

1. 更正javascript代码中使用的canvas id的拼写错误。
2. 更改按钮的位置。当前按钮位于画布下方，因此无法单击按钮。
3. 在E驱动器上创建Green和Images目录。它应该在E:\Green\Images中。

工作代码如下。

Javascript

<script type="text/javascript">
        // Send the canvas image to the server.
        $(function () {
            $("#btnSave").click(function () {
                can1 = document.getElementById("boardcanvas");
                ctx1 = can1.getContext("2d");
                var coll = document.getElementById("layer2");
                ctx1.drawImage(coll, 0, 0);
                var image = can1.toDataURL("image/png");

                alert(image);
                image = image.replace('data:image/png;base64,', '');
                $.ajax({
                    type: 'POST',
                    url: 'Default.aspx/UploadImage',
                    data: '{ "imageData" : "' + image + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {
                        alert('Image saved successfully !');
                    }
                });
            });
        });
    </script>

HTML代码

<div style="position: relative; width: 456px; padding: 0px; margin: 0px;">
        <canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0;
            top: -220px; z-index: 0;">
        </canvas>
        <canvas id="layer2" width="456" height="480" style="position: absolute; left: 0;
            top: -220px; z-index: 1;">
        </canvas>
    </div>
    <input type="button" id="btnSave" style="position: absolute; left: 460px; width: 150px;
        text-align: center; height: 30px; z-index: 2;" name="btnSave" value="Save as Image!" />

Asp.Net 的后端代码没问题。 请尝试使用上面的代码。肯定可以正常工作（不要忘记创建目录）。

- KiranPalode

Answer 2

问题在于您正在使用var coll的画布在drawImage()中。您应该使用它的上下文而不是画布。这是修复方法：

can1 = document.getElementById("broadcanvas");
ctx1 = can1.getContext("2d");
var coll = document.getElementById("layer2");
var ctx2 = coll.getContext("2d");
ctx1.drawImage(ctx2, 0, 0);
var image = can1.toDataURL("image/png");  

- anoncoder

Answer 3

看起来你只将一个图像（“broadcanvas”）转换为数据URL。尝试这样：

var image = ctx1.toDataURL("image/png");

如果变量命名不相似，你会更快地发现这个问题。

- Owlvark

Answer 4

这里有一个我常用的技巧，我经常遇到一个问题：确保所有图片都已加载并可用。

在创建图像后，使用onload事件来跟踪图像是否准备好使用。我发现使用以下代码可以奏效（未经测试，主要用作一般参考）：

//I set to the window event to make sure it stays available. This is handy in many applications that may need to wait.
window.image1 = document.getElementById('img1');
window.image2 = document.getElementById('img2');
window.canv1 = document.getElementById('canv1');
window.canv2 = document.getElementById('canv2');
window.ctx1 = window.canv1.getContext('2d');
window.ctx2 = window.canv2.getContext('2d');
window.imagesLoaded = 0; 

//load the images
window.image1.onload = function(){
  window.imagesLoaded++;
}
window.image2.onload = function(){
  window.imagesLoaded++;
}

//function to handle them all loading
function loaded(){
  if(window.imagesLoaded==2){

    //draw initial images
    ctx1.drawImage(image1,0,0);
    ctx2.drawImage(image2,0,0);

    //at this point you should have 2 canvas's with 2 different images, 
    //now as I understand it you want to save them both to one canvas. 
    //So first grab a new canvas element.
    var newImg1 = window.canv1.toDataURL('image/png');
    var newImg2 = window.canv2.toDataURL('image/png');
    window.canv3 = document.getElementById('canv3');
    window.ctx3 = window.canv3.getContext('2d');

    //this is the tricky part, side by side, 
    //overlapping or top/bottom by manipulating the x,y. 
    //I just make a general example here.
    ctx3.drawImage(newImg1,0,0);
    ctx3.drawImage(newImg2,10,10);

    //finally create the new image as an image, 
    //you can do whatever you need with this
    var newImg3 = window.canv3.toDataURL('image/png');
  }else{
    //set a timeout to retry this function if the images were not ready
    setTimeout(function(){
      loaded();
    },100);
  }
}
loaded();

在这个例子中，我可能过度使用了window对象，很可能只需要在“imagesLoaded”变量上真正需要它以确保我能看到它的更新，但这样就不需要向函数传递参数。

- Jordan Ramstad

Answer 5

这里是一个可工作的示例：

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="http://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream" width="220" height="277">

<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<p> Canvas2: </p>
<canvas id="myCanvas2" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

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

var img=document.getElementById("scream");
ctx.drawImage(img,30,5);
ctx.drawImage(img,5,30);

var c2=document.getElementById("myCanvas2");

var ctx2=c2.getContext("2d");


ctx2.drawImage(c,0,0)
ctx2.drawImage(img,-10,50);


var image = c2.toDataURL("image/png"); 
console.log(image);

image = image.replace('data:image/png;base64,', '');
console.log(image);

</script>

</body>
</html>

这是一个带有工作示例的Fiddle：Fiddle

- ElLocoCocoLoco

Answer 6

问题可能是为什么您希望在浏览器中进行这种类型的数据操作，而asp.Net和基本上所有服务器端库通常可以利用操作系统上的图像处理库（如GD，GD2，ImageMagick等）。

这是为了避免上传两个不同的文件到服务器吗？因为使用这种方法，您只会在HTTP事务中保存，而不一定在带宽方面节省。

这只是一个想法，因为似乎客户端并没有需要完成的内在工作。这可能仅仅是因为您的示例已经被简化了。

- Nick Sharp