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下载并显示图像

回答

相关问题