IE에서 StackOverflow를 생성하는 이미지를위한 ihttphandler
-
10-07-2019 - |
문제
사용자에게 제공 해야하는 웹 응용 프로그램의 컨텍스트 외부에있는 이미지 디렉토리가 있습니다. 현재 IHTTPHANDLER을 사용하여 이미지를 제공하고 일부 JavaScript를 사용하여 이미지 세트를 탐색합니다 (현재는 원시적입니다). IHTTPHANDLER를 사용하여 이미지를 밀접하게 제공하는 예제를 따랐지만 Firefox에서 이미지를 볼 때 브라우저가 매달려 있고 IE에서 볼 때 "스택 오버 플로우에서 : 0"을 얻습니다.
ihttphandler 코드
Public Class ShowImage : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) _
Implements IHttpHandler.ProcessRequest
Dim picid As String
If context.Request.QueryString("id") IsNot Nothing Then
picid = context.Request.QueryString("id")
Else
Throw New ArgumentException("No parameter specified")
End If
'' Convert Byte[] to Bitmap
context.Response.Cache.SetCacheability(HttpCacheability.NoCache)
context.Response.Cache.SetNoStore()
context.Response.Cache.SetExpires(DateTime.MinValue)
Dim newBmp As Bitmap = GetPhoto(picid)
If newBmp IsNot Nothing Then
Dim imgGraphics As Graphics = Graphics.FromImage(newBmp)
imgGraphics.DrawImageUnscaled(newBmp, 0, 0, 640, 480)
context.Response.StatusCode = 200
context.Response.ContentType = "image/jpeg"
newBmp.Save(context.Response.OutputStream, ImageFormat.Jpeg)
newBmp.Dispose()
Else
'' Return 404
context.Response.StatusCode = 404
context.Response.End()
End If
End Sub
...
Public ReadOnly Property IsReusable() As Boolean _
Implements IHttpHandler.IsReusable
Get
Return True
End Get
End Property
End Class
다음은 위에서 정의 된 ihttphandler라고하는 JavaScript 코드입니다.
function updateImage(){
var ddlPhotos = document.getElementById("ddlPhotos");
var selected = ddlPhotos.options[ddlPhotos.selectedIndex].value;
if( selected != -1 ){
// Update the image
retrievePicture(document.getElementById("propertyImage"), selected)
}
}
function retrievePicture(imgCtrl, picid)
{
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}
마지막으로 여기에 "장소 홀더"인 IMG 태그가 있습니다.
<img src="#"
alt="Property Photo"
width="640px"
height="480px"
id="propertyImage"
onload="retrievePicture(this, '<%= pictureId.value %>');"
/>
나는 왜 JavaScript가 통제 불능 상태로 보이는지에 대해 혼란스러워합니다 ...
해결책
나의 추측 - 자바 스크립트 전문가가 아닙니다. onload
이미지가로드가 완료 될 때마다 이벤트가 트리거됩니다. 다시 말해서, 이미지가로드 되 자마자 새로운 것을로드하는 것을 트리거합니다 ... 새 제품을로드하는 데 트리거됩니다.
브라우저가 캐싱되지 않는 한, 동일한 이미지에 대해 서버로 여러 호출을 볼 수있을 것입니다. 어쨌든, 다른 방법으로 트리거하거나 트리거가 이미지가 이미 올바른 이미지임을 감지해야하며 교체 할 필요가 없습니다.
다른 팁
SRC를 변경하고 새 이미지를로드하는 행위가 이미지의 "Onload"이벤트를 다시 트리거 할 수 있다고 생각합니다.
소스를 설정하기 전에 이벤트를 지우십시오. 아마도 이것과 비슷해 보일 것입니다.
function retrievePicture(imgCtrl, picid)
{
imgCtrl.onload = null;
imgCtrl.src = 'ShowImage.ashx?id=' + picid;
}