asp.net의 서버에서 그려진 이미지를 캔버스에 저장

Question

서버에 이미지 파일을 저장할 수 있지만 이미지가 비어있는 이미지로 저장됩니다. 캔버스에 그려진 이미지는 저장되지 않지만 사각형을 그릴 경우 원이 그려집니다. ... whts 내 코드에서 문제를 도와 PLZ 잘 저장

스크립트 코드 :

$(document).ready(function() { 

     var myCanvas = document.getElementById("Canvas1"); 
     var myContext = myCanvas.getContext("2d"); 
     var myImg = new Image(); 
     myImg.src = "images/cabinbg.jpg"; 
     myImg.onload = function() { myContext.drawImage(myImg, 0, 0); }; 


     var dataURL = document.getElementById("Canvas1").toDataURL("image/png"); 
     $('#<%=btnAdd.ClientID %>').live('click', function() { 
      dataURL = dataURL.replace('data:image/png;base64,', ''); 

      $.ajax({ 
       type: "POST", 
       url: "LayoutMaster.aspx/GetImage", 
       data: "{ 'image':'" + dataURL + "'}", 
       contentType: 'application/json; charset=utf-8', 
       dataType: 'json' 
      }).done(function (respond) { 
       //alert(respond); 
      }); 

     }); 

CS 파일 당신은 당신이 시도하기 전에 완료 이미지 온로드 기다리고되지 않습니다

[System.Web.Services.WebMethod()] 
    public static void GetImage(string image) 
    { 
     if (image != "") 
     { 
      try 
      { 
       FileStream fs; 
       byte[] photo = Convert.FromBase64String(image); 
       fs = new FileStream(HostingEnvironment.MapPath("~/images/abc.png"),  FileMode.OpenOrCreate, FileAccess.Write); 
       BinaryWriter br = new BinaryWriter(fs); 
       br.Write(photo); 
       br.Flush(); 
       br.Close(); 
       fs.Close(); 

      } 
      catch (Exception e) 
      { 
       e.Message.ToString(); 
      } 

     } 
    } 

Answer 1

캔버스를 추출하다 데이터 URL로 존재합니다.

myImg.src = "images/cabinbg.jpg"; 
myImg.onload = function() { myContext.drawImage(myImg, 0, 0); }; 

//... you go right to extracting here before onload 
// above potentially has finished leaving canvas blank 
// as nothing is drawn yet... 

var dataURL = document.getElementById("Canvas1").toDataURL("image/png"); 

은 onload 이벤트 내부 extrating 코드를 둘 필요가이 문제를 해결하려면 ..

function extractImage() { 
    /* here goes the canvas.toDataUrl etc.. */ 
} 

myImg.onload = function() { 
    myContext.drawImage(myImg, 0, 0); 
    extractImage(); 
} 
myImg.src = "images/cabinbg.jpg"; 

(지금은 당신이 실제로 업로드하기 전에 데이터 URL의 헤더 를 자르고있다 참조 내 bad ..) data-url의 실제 데이터 (문자열)가 서버에 도착했다고 가정하면 data-url의 헤더가 잘리는 것을 잊어 버리는 것처럼 보입니다.

데이터 URL을 포함하여 base64를 디코딩하면 매우 잘 작동하지 않습니다.

(자세한 내용은 this link 참조를 위해) 문자열이 같을 것이다 :

data:image/png;base64,the-base64-data... 

그래서 당신이해야 할 일을 헤더를 구문 분석하고 그것을 떨어져 잘라하는 것입니다 :이 경우

data:[<MIME-type>][;charset=<encoding>][;base64],<data> 

을 up-to와 ...;base64,을 포함하여 나머지 문자열을 디코딩합니다.

언급 할 가치가있는 내용 : toDataUrlit will always be PNG에 대한 이미지 형식을 지정하지 않은 경우

물론 다양한 형식이 필요하다면 mime 형식, 인코딩 등을 읽는 데 더 깊이있는 파서를 구현해야합니다.