如何将多个画布保存到一个图像中

我想使用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(); 
      } 
     } 
    } 
}

来源

2012-09-14 Anish

看看是否有帮助http://stackoverflow.com/questions/3750580/save-many-canvas-element-as-image – ksskr

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

看起来要转换只有一个图像（ “broadcanvas”）到数据网址。试试这个：

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

非类似的变量命名会帮助你更快地发现它。

来源

2012-09-23 00:24:23 Owlvark

这里是一个工作为例：

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

来源

2013-07-26 13:11:27 ElLocoCocoLoco

这里的问题是，你正在使用的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");

来源

2013-08-06 03:47:14 justindeguzman

对于这个代码的正常工作，你需要做以下的事情

更正JavaScript代码中使用的帆布ID的拼写。
更改按钮的位置。目前按钮在画布下。所以不能点击按钮。
在E驱动器中创建目录绿色和图像。它应该在那里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端代码确定。请尝试使用上面的代码。当然它会工作（不要忘记创建目录）。

来源

2013-08-08 12:57:14 KiranPalode

这个问题可能会变成为什么你想在浏览器中进行这种类型的数据管理时，asp.Net和基本上所有的服务器端库通常可以利用操作系统上的图像处理库（在像GD， GD2，ImageMagick等）。

是否要避免必须将两个不同的文件上传到服务器？由于采用这种方法，您只能保存在HTTP事务中，而不一定是带宽。

只是一个想法，因为它听起来并不像在客户端本身有任何东西需要在这里完成。这可能只是因为你的例子已经减少了。

来源

2013-08-08 15:57:50

这是我做的一个技巧，我有很多问题确保所有的图像都加载并可用。

紧随图像创建后，使用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”变量来确保我可以看到它的更新，但是这样就不需要传递参数给函数了。

来源

2013-08-12 20:04:35

如何将多个画布保存到一个图像中

回答

相关问题