파일 디렉토리에서 생성 후 페이지에 사용자 정의 생성 된 이미지 표시

Question

ASP.NET에서 System.Drawing을 사용하여 사용자가 양식 내에 입력 한 내용을 기반으로 사용자 정의 이미지를 생성합니다. 생성 된이 이미지는 서버의 디렉토리에 저장됩니다.

사용자가 양식을 제출 한 후 별도의 페이지에 로딩 아이콘을 표시하고 사용자 정의 이미지가 생성되면로드 아이콘이 서버 디렉토리의 이미지로 대체됩니다. .

여러분 중 일부는 내가 <img /> 태그 내에서 JPEG 등의 이미지를 보여주기 위해 일반 처리기 (.ASHX)를 사용하는 것이 좋습니다 수 있습니다. 하지만이 문제는 사용자가 이미지를 마우스 오른쪽 버튼으로 클릭하여 저장하면 .ashx 파일로 저장된다는 것입니다.

오전 데 문제는 이미지가 성공적으로 파일 디렉토리에 생성되면 페이지를 새로 고침하는 방법을 아는되지 않습니다.

Answer 1

이 당신이 이것을 달성 할 수 꽤 몇 가지 방법이지만, 여기에 내가 개인적으로 할 줄거야. 먼저 이미지를 생성하는 양식 제출 (이미지를 생성하는 데 사용하는 데이터)을 수신하도록 처리기를 생성합니다 (개인적으로 서버에 파일을 저장하지는 않겠지 만 원하는대로) base64로 인코딩하고, 처리기를 사용하여 JSON을 사용하여이 문자열을 반환합니다. 클라이언트 측에서

public void ProcessRequest (HttpContext context) 
{ 
    // generate the image from POST/GET data sent to this handler from your form 
    Bitmap bmp = GenerateImage(postData); 

    // now convert your generated image to a base64 string 
    string base64 = string.Empty; 
    using (MemoryStream ms = new MemoryStream()) 
    { 
     bmp.Save(ms, ImageFormat.Png); 
     base64 = Convert.ToBase64String(ms); 
    } 

    // now return this base64 string to the caller 
    context.Response.ContentType = "application/json"; 
    string json = "{ \"imageBase64\": \"" + base64 + "\" }"; 
    context.Response.Write(json); 
} 

내가 jQuery를 사용하고 POST 내 핸들러에 Ajax 호출을 할 것입니다/폼 데이터를 GET하고 내 img HTML 태그의 src 속성을 설정하기 위해 64 기수에게 인코딩 된 이미지의 문자열을 검색 . 내가 말했듯이

function postAndRetrieveImage() { 
    $.ajax({ 
     url: "http://server/myhandler.ashx", 
     data: jsonDataParsedFromForm, 
     dataType: "json", 
     type: "POST", 
     contentType: "application/json", 
     async: true, 
     cache: false, 
     beforeSend: function() { 
      // overlay your "loading..." image or something while you wait 
      // for response from the server 
     }, 
     complete: function() { 
      // hide your "loading..." image (or whatever it is) as the operation 
      // has completed 
     }, 
     success: function(data) { 
      var response = jQuery.parseJSON(data.d); 

      // set the src attribute of the IMG tag (prefixed with the usual 
      // image stuff) with the base64 
      var image = document.getElementById("myImage"); 
      image.setAttribute("src", "data:image/png;base64," + response.imageBase64); 
     }, 
     error: function() { 
      // display error in some way 
     } 
    }); 
} 

,이 때문에이 ROUGH (안된) 예를 들어 내가이 작업을 수행하려는 방법 중 하나를 얻을 수있는 많은 방법이있다. IMG 태그를 사용하면 이미지를 마우스 오른쪽 버튼으로 클릭하여 저장할 수도 있습니다.

희망 사항은 시작 지점으로 도움이되기를 바랍니다.