cómo guardar varios lienzos en una sola imagen

Quiero guardar varios lienzos en una imagen usando asp.net. Intenté con dos lienzos, pero no está guardando.cómo guardar varios lienzos en una sola imagen

lona:

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

Fuente

2012-09-14 Anish

ver si esto ayuda http://stackoverflow.com/questions/3750580/save-many-canvas-element-as-image – ksskr

@ksskr sí, puedo conseguirlo pero quería saber cómo podemos integrar esas explicaciones aquí . Probé su método pero no muestra la salida – Anish

parece que se está convirtiendo una sola imagen ("broadcanvas") a una url de datos. Pruebe esto:

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

La nomenclatura variable no similar le hubiera ayudado a detectarlo más rápido.

Fuente

2012-09-23 00:24:23 Owlvark

Aquí es un exemple de trabajo:

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

Aquí es un violín con un exemple de trabajo: Fiddle

Fuente

2013-07-26 13:11:27 ElLocoCocoLoco

El problema aquí es que está utilizando el lienzo de var coll en drawImage(). Deberías usar su contexto en su lugar. Aquí está la solución:

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");

Fuente

2013-08-06 03:47:14 justindeguzman

Para el buen funcionamiento de este código que tiene que hacer las cosas de abajo

corregir la ortografía de la lona Identificación del utilizado en el código JavaScript.
Cambia la posición del botón. Actualmente el botón está debajo del lienzo. Entonces no puedo hacer clic en el botón.
Cree directorios verdes e imágenes en la unidad E. Debe estar allí E: \ Green \ Images

El código de trabajo es.

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>

código 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!" />

código del lado del Asp.Net está bien. Por favor, intente con el código anterior. Seguro que funcionará (No olvides crear el directorio).

Fuente

2013-08-08 12:57:14 KiranPalode

La pregunta podría ser por qué querría hacer este tipo de intercambio de datos en el navegador cuando asp.Net y esencialmente todas las bibliotecas del lado del servidor usualmente pueden aprovechar las bibliotecas de procesamiento de imágenes en el sistema operativo (en Linux como GD, GD2, ImageMagick, etc.).

¿Es para evitar tener que subir dos archivos distintos al servidor? Dado que con este enfoque solo estarías guardando en transacciones HTTP, no necesariamente en ancho de banda.

Solo un pensamiento, ya que no parece que haya algo inherentemente en el cliente que deba hacerse aquí. Eso puede ser solo porque tu ejemplo se adelgazó.

Fuente

2013-08-08 15:57:50

He aquí un truco que hago, tengo un montón de problemas con Asegurándome de que todas las imágenes estén cargadas y disponibles.

Inmediatamente después de crear la imagen, utilice el evento onload para rastrear si la imagen está lista para usar. Encuentro que usar algo como el siguiente código hace maravillas (no probado, principalmente para ser utilizado como una referencia general):

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

pude haber abusado del objeto de la ventana en este ejemplo, más probable es que sólo se necesita realmente en la variable "imagesLoaded" para asegurarme de que puedo ver sus actualizaciones, pero de esta manera no será necesario pasar parámetros a la función también.

Fuente

2013-08-12 20:04:35

cómo guardar varios lienzos en una sola imagen

Respuesta

Cuestiones relacionadas