javascript - 在 django 上使用 blob 和 arraybuffer 加载图像不起作用

Question

现在我必须在 html 上加载带有一些标题的图像，所以我使用 blob 和 arraybuffer 方法来加载它，而不是简单地与 img src 链接。

但这似乎效果不佳，因为：

1. 在 blob 方法上，请求状态为 0，就绪状态并不总是 DONE。
2. 在 arraybuffer 方法上，onload 不会在任何浏览器中调用。

我确定该链接没有损坏，因为我使用具有相同 url 和标头的 python 对其进行了测试。

这是代码：

<script type="text/javascript">
function getimg(linksrc,imgid){//using arraybuffer

    var oReq = new XMLHttpRequest();
    oReq.open("GET", linksrc, true);
    oReq.setRequestHeader('User-Agent',"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36");
    oReq.setRequestHeader('Referer',"https://dccon.dcinside.com/");
    oReq.setRequestHeader('Sec-Fetch-Mode',"no-cors");
    // use multiple setRequestHeader calls to set multiple values
    oReq.responseType = "arraybuffer";
    oReq.onload = function (oEvent) {
      var arrayBuffer = oReq.response; // Note: not oReq.responseText
      if (arrayBuffer) {
        var u8 = new Uint8Array(arrayBuffer);
        var b64encoded = btoa(String.fromCharCode.apply(null, u8));
        var mimetype="image/png"; // or whatever your image mime type is
        document.getElementById(imgid).src="data:"+mimetype+";base64,"+b64encoded;
      }
    };
    alert("aa")
    oReq.send(null);
}
function getimg2(linksrc,imgid){

    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob'; //so you can access the response like a normal URL
    xhr.onreadystatechange = function () {
        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
            alert("inin");
            var img = document.getElementById(imgid);
            img.src = URL.createObjectURL(xhr.response); //create <img> with src set to the blob
        }
    };
    xhr.open('GET', linksrc, true);
    xhr.setRequestHeader('User-Agent',"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36");
    xhr.setRequestHeader('Referer',"https://dccon.dcinside.com/");
    xhr.setRequestHeader('Sec-Fetch-Mode',"no-cors");
    xhr.send();
}
</script>

<div class="card-columns" >
    {% for conl in dclist %}
        <div class="card" >
            <img src="" id="{{conl.4}}" class="card-img-top" alt="{{conl.0}}">
            <script>
                getimg("{{conl.3}}","{{conl.4}}");
            </script>
            <div class="card-body">
                <h5 class="card-title" style="white-space:nowrap;font-family: 'Noto Sans KR', sans-serif;"><b>{{conl.0}}</b></h5>
                <p class="card-text">by {{conl.2}}</p>
                <form method='GET' action="">
                    <input type="hidden" name="idxn" value={{conl.1}} />
                    <button class="btn btn-primary btn-sm" type="submit">Download</button>
                </form>
            </div>
        </div>
    {% endfor %}
</div>

提前致谢。

标签： javascriptpythonhtmldjango