Django通過ajax下載並顯示圖像

我正在嘗試爲我的views.py創建一個ajax請求，該請求返回較大圖像的裁剪片段。我遇到的問題是該圖像似乎沒有被下載，或者至少沒有被繪製。沒有與它關聯的錯誤消息，只是沒有任何反應（包括「測試」沒有被記錄到控制檯）。我已經在JavaScript中留下了一些我的嘗試，但沒有一個人似乎有效。Django通過ajax下載並顯示圖像

查看功能似乎並不是特別迅速，在請求後5秒鐘打印「被叫」響應。我想知道這是否是因爲加載圖像需要很長時間？如果是這種情況，有沒有辦法加快速度，即只加載一次圖像並將其保存在內存中，或者只是一種更好的方式。這是一個相當大的圖像（12000x6000像素，28.5 MB的JPEG）。我知道，通過使用日誌記錄模塊確認views.py函數正在被調用。

因此，在短期：

爲什麼我的圖像不顯示？
有沒有更快的方式來提供圖像？

Views.py：

def test(request): 
    img = Image.open(settings.STATIC_PATH + 'geogame/big_map.jpg') 
    img.load() 
    xpos = int(request.GET.get('xpos', '')) 
    ypos = int(request.GET.get('ypos', '')) 
    upper = ypos*10 - 300 
    left = xpos*10 - 600 
    right = xpos*10 + 600 
    lower = ypos*10 + 300 
    cropped_img = img.crop((left, upper, right, lower)) 
    logging.warn('called') 

    response = HttpResponse(content_type = 'image/jpg') 
    img.save(response, "JPEG") 
    return response

Ajax請求：

Game.zoom = function() { 
    zoomx = Game.clickX 
    zoomy = Game.clickY 
    $.ajax({ 
     url: 'zoom/', 
     data: {xpos: zoomx, ypos: zoomy}, 
     type: 'get', 
     success: function(data) { 
      //Game.zoomedImg.src = "data:image/jpg;base64,"+data 
      //Game.zoomedImg.src = data; 
      //console.log(Game.zoomedImg.src); 
      Game.zoomedImg.onload = function() { 
       console.log("load"); 
       Game.zoomedImg.src = "data:image/jpg;base64,"+data 
      } 
      //$("#" + this.zoomedImg).one("load", function() { 
      // console.log("test"); 
      // Game.ctx.drawImage(Game.zoomedImg, 0, 0); 
      // }).attr("src", "data:image/jpg;base64,"+data); 
      //Game.ctx.drawImage(Game.zoomedImg, 0, 0); 
      console.log("hello"); 
      //}; 
     }, 
     failure: function(data) { 
      console.log('failed to load zoomed image') 
     } 
    }); 
}

謝謝！

編輯

buffer = cStringIO.StringIO()  logging.warn('egege') 
cropped_img.save(buffer, format = "JPEG") 
logging.warn('ffgge') 
img_str = base64.urlsafe_b64encode(buffer.getvalue()) 
logging.warn('leflefe') 
return HttpResponse(img_str)

來源

2015-12-26 Samuel Barnett

這是不可能回答，沒有更多的細節。什麼是遊戲？什麼是zoom事件？它何時被調用？爲什麼你在'onload'事件中分配返回的數據 - 會觸發這個事件的是什麼？ –

遊戲是一個類（我認爲，我很新的JavaScript）。在用戶點擊html5畫布時調用縮放，這些座標用於縮放。數據被分配到一個onload事件，因爲我已經讀過，你不想分配src，直到它完全下載，並且直到發生這種情況纔會激活（我可能是錯的）。但是我相當肯定onload函數根本不被調用。 –

但是數據*是*加載的，因爲您在Ajax成功函數中，直到響應完成加載纔會觸發。在那裏使用onload確實沒有意義。 –

嗯，我相信我已經解決了這兩個部分

的圖像需要加載像這樣之後被裝載到一個字符串緩衝區和base64編碼被下載：

buffer = cStringIO.StringIO() 
cropped_img.save(buffer, format = "JPEG") 
img_str = base64.b64encode(buffer.getvalue()) 
return HttpResponse(img_str)

這看起來是因爲作物動作很懶，需要先保存才能生效。

另外爲了加快圖像加載操作的進程並使其成爲單一的出現，以下兩行可以移動到函數外部的views.py文件的開頭。

img = Image.open(settings.STATIC_PATH + 'geogame/big_map.jpg') 
img.load()

來源

2015-12-28 20:55:06

Django通過ajax下載並顯示圖像

回答

相關問題