Question

问题：想象一下，我有一个td元素，如下所示：

<td td="" colspan="2">
  <br>
   <img src="ImageServlet" alt="random image" border="0" id="simpleRandomImg">      
 </td>

当然，还有其他HTML。 servlet中包含的图像没有HTML中显示的有用src（显然） - 但是，当我在Chrome中打开网络选项卡时，我可以预览加载的图像本身并将图像复制为数据URI - 它给我一个稳定的URL，如：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAyCAIAAACWMwO2AAAhQklEQVR42u2dB1Sb5/nonTRt2pPkJGmSNm180zhNTkabuPGKMeAwxBaIJYEYWmhLSEIggRhaaAIaIEASEggQew+zzPLEdjyy07T/9t9129t129u9z7mP9LnfXxZCBuLeS/71c77zIRQCGj89z+993+d7vS/GH7GxsXH+wGAwCf5ITExMSkpKTk5OSUlJTU1N80d6etcetcetc...

所以，显然存在对加载图像的稳定引用。显然我的浏览器'知道'该引用是什么，因为我可以检索它作为数据URI的链接 - 但实际的HTTP响应中没有引用该数据URI。对于了解JavaScript的人来说，这似乎不那么神秘，但有人不是我自己 - 所以有人可以解释这里发生了什么，以及是否有某种方法从HTTP响应中收集数据图像URI？

尝试解决方案：在HTTP响应中进行了一些挖掘并找到了一点JavaScript，显然它处理了图像的变化：

function changeImage() {
 // makes a new image load
 var obj=document.getElementById('simpleRandomImg');
 if (obj != null) {
  // append a unique index to force browser to reload
    obj.src='ImageServlet?'+(cnt++);
    }

但是，我在那里看到的任何内容都没有说明图像的实际URI位置。和以前一样，如果我打开Google Chrome网络标签并尝试从单个响应中检索数据图像URI，它就会起作用并为我提供有效的URI - 因此，显然浏览器正在接收它。我该如何访问它？

e：要明确，我不会控制有问题的网站，所以我不能通过更改内部javascript来“修复”它 - 我正在查看网站并且对是否可以检索加载的图像，而不是截取页面本身。

Answer 1

您可以使用src将图片的URI设置为setAttribute，如下所示：

obj.setAttribute('src', uriString)

Answer 2

这样的事情应该有效。 Canvas API有一个名为toDataURI

的函数

function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
        canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

        canvas.getContext('2d').drawImage(this, 0, 0);

        // Get raw image data
        callback(canvas.toDataURL('image/jpg').replace(/^data:image\/(png|jpg);base64,/, ''));

        // ... or get as Data URI
        callback(canvas.toDataURL('image/jpg'));
    };

    image.src = url;
}

// Usage
// beware of server cors settings..
getDataUri('image url here', function(dataUri) {
    console.log(dataUri)
    // Do whatever you'd like with the Data URI!
});

从HTTP响应

2 个答案: