캔버스에있는 코드에서 이미지를 열고 사용자가이 이미지를 그릴 수있게하는 방법

Question

저는 초보자 인 HTML5입니다.

는 내가하고 싶은 것입니다 :

다음 사용자가이 이미지를 그릴 수 canvas에 이미지를 업로드, 그래서 난 내 데이터베이스에 이미지를 저장할 수 있습니다.

나는이 lesson

---

를 그릴하지만 난 다음, 캔버스에 이미지를 열고 사용자가이 이미지를 그려 보자하는 방법을 모른다 방법에 대해 알아보십시오.

Answer 1

나의 이해가 맞으면 : 당신은 데이터베이스에서 이미지를 가져 오지 그것을 그릴 사용자에게 표시 한 후 다시 데이터베이스에 저장하는 서버에 다시 업로드 할!

1 - 데이터베이스에서 이미지를 반환하는 IHttpHandler를 (.ASHX)을 작성

public class ImageHandler : IHttpHandler 
{ 
    public bool IsReusable { get { return true; } } 
    public void ProcessRequest(HttpContext ctx) 
    { 
    var myImage = function_to_read_the_image(); 
    ctx.Response.ContentType = "image/png"; 
    ctx.Response.OutputStream.Write(myImage); 
    } 
} 

는 getImage.ashx

2로 이것을 저장 -에)합니다 (InitThis의 기능을 다음 줄을 추가합니다 자습서를 ctx = document.getElementById ('myCanvas'). getContext ("2d"); 뒤에 인용 한. 다시 사용하여 서버에 최종 도면을 업로드 -

ctx.drawImage(image, 0, 0, 500, 200); 

3 : 캔버스 또한

var image = new Image(); 
image.src = 'http://www.site.com/getImage.ashx'; 
$(image).load(function() { 
    ctx.drawImage(image, 0, 0); 
}); 

이미지를 스트레치 또는 캔버스를 채우기 위해 폭과 높이를 추가 할 수 있습니다에 사진을 표시합니다 캔버스의 toDataURL 함수를 호출하고 이미지를 데이터베이스에 저장합니다.

서버에 캔버스 imageData의 전송 :

var Pic = document.getElementById("myCanvas").toDataURL("image/png"); 
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "") 
$.ajax({ 
    type: 'POST', 
    url: 'Save_Picture.aspx/UploadPic', 
    data: '{ "imageData" : "' + Pic + '" }', 
    contentType: 'application/json; charset=utf-8', 
    dataType: 'json', 
    success: function (msg) { 
     alert("done, Image Uploaded."); 
    } 
}); 

독서와 이미지 서버 측 저장 :

using System; 
    using System.Web; 
    using System.IO; 
    using System.Web.Script.Services; 
    using System.Web.Services; 
    [ScriptService] 
    public partial class Save_Picture : System.Web.UI.Page 
    { 
     [WebMethod()] 
     public static void UploadPic (string imageData) 
     { 
      byte[] data = Convert.FromBase64String(imageData); 
      // save it in a file or database ... 
     } 
    } 

Answer 2

1. 로드 캔버스로 이미지 :

   var image = new Image(); 
   image.addEventListener("load", function() { 
       ctx.drawImage(image, x, y); 
   }); 
   image.src = 'http://server/image.jpg'; 
   

2. 사용자가 당신이 질문에 링크 된 기능이 이미지를 그려 보자.