HTML5 캔버스

Question

첫째, 약간의 배경 사용하지 않고 BASE64 할 이미지를 변환 :이 서문의 장황한 자연을위한 시간을 미리 사과

을; 그러나 질문의 ​​본질에 국한되지 않는 대체 솔루션을 제공하는 데 도움이 될 수 있습니다.

임베디드 WinForm UserControls를 사용하는 ASP.NET MVC 응용 프로그램이 있습니다. 이 컨트롤은 Microsoft.Ink 라이브러리를 통해 TabletPCs에 "잉크 오버"지원을 제공합니다. 그들은 IE8 기업 표준으로 인해 불행한 필요성이 있습니다. 그렇지 않으면 HTML5 Canvas가 솔루션이됩니다.

어쨌든 이미지 URL은 InkPicture 컨트롤에 <PARAM>을 통해 전달됩니다.

<object VIEWASEXT="true" classid="MyInkControl.dll#MyInkControl.MyInkControl" 
     id="myImage" name="myImage" runat="server"> 
    <PARAM name="ImageUrl" value="http://some-website/Content/images/myImage.png" /> 
</object> 

UserControl의 각 속성은, 그 URL을 취하는 HttpWebRequest을 수행하는 방법을 호출하고, 리턴 된 이미지는 InkPicture에 배치된다.

public Image DownloadImage(string url) 
    { 
     Image _tmpImage = null; 

     try 
     { 
      // Open a connection 
      HttpWebRequest _HttpWebRequest = (HttpWebRequest)HttpWebRequest.Create(url); 
      _HttpWebRequest.AllowWriteStreamBuffering = true; 

      // use the default credentials 
      _HttpWebRequest.Credentials = CredentialCache.DefaultCredentials; 

      // Request response: 
      System.Net.WebResponse _WebResponse = _HttpWebRequest.GetResponse(); 

      // Open data stream: 
      System.IO.Stream _WebStream = _WebResponse.GetResponseStream(); 

      // convert webstream to image 
      _tmpImage = Image.FromStream(_WebStream); 

      // Cleanup 
      _WebResponse.Close(); 
     } 
     catch (Exception ex) 
     { 
      // Error 
      throw ex; 
     } 

     return _tmpImage; 
    } 

문제

이 작동하지만, 크게로드에서 내 웹 페이지를 지연이 과정에서 많은 오버 헤드 (적합하지 15초 ...을 복용 15 개 이미지)가있다. UserControl에서 Image img = new Bitmap(url);을 수행하면 FileIO 사용 권한 문제로 인해이 상황에서 작동하지 않습니다 (완전 신뢰 여부에 관계없이 해당 문제를 해결하지 못했습니다). 심지어 canvas를 사용하는 것은 현재 옵션은 아니지만

---

초기 솔루션

, 나는 그것을 사용하는 솔루션을 테스트하기로 결정했다. 자바 스크립트에서 각 이미지를로드 한 다음 canvas 및 toDataUrl()을 사용하여 base64 데이터를 가져옵니다. 그런 다음 URL을 UserControl에 전달하고 모든 다리 작업을 수행하는 대신 base64 데이터를 <PARAM>으로 전달합니다. 그런 다음 해당 데이터를 이미지로 신속하게 변환합니다.

15 이미지의 경우 15 초가 이제는 3 초 미만입니다. 따라서 IE7/8에서 작동하는 이미지 -> base64 솔루션을 찾기 시작했습니다.

• 용액을 외부 종속성 (즉 $ .getImageData)가 없습니다

  ---

  여기서 추가적인 요건/제한된다.

• 휴대 할 수 있도록 100 % 캡슐화되어야합니다.
• 이미지의 소스와 수량은 가변적이며 URL 형식이어야합니다 (앞면 base64 데이터는 옵션이 아닙니다).

나는 충분한 정보를 제공해 주셨고 귀하가 줄 수있는 방향에 대해 감사 드리겠습니다.

감사합니다.

Answer 1

이전 Internet Explorer 버전에서 Flash 또는 VML을 사용하여 캔버스를 시뮬레이션하는 FlashCanvas, fxCanvas 또는 excanvas 라이브러리를 사용할 수 있습니다. 나는 이들 모두가 Canvas API의 toDataURL 메서드를 제공하여 이미지의 인코딩 된 표현을 얻을 수 있다고 믿습니다.

광범위하게 파고 들자 (같은 픽스에있다.) 이것이 유일한 해결책이라고 생각한다. 이미지를 보낼 수있는 PHP 스크립트를 작성하는 것이 부족하다. 물론 그 문제는 이러한 세 가지 조건 중 하나에 해당하지 않는 한 PHP 스크립트로 이미지를 전송할 수있는 방법이되지 않는 것입니다 :

브라우저는 입력을 지원

• 배열 (Uint8Array)
• 브라우저 지원 sendAsBinary 이미지가의