Question

我正在尝试使用XMLHttpRequest从共享点库获取图像。但是在转换像

这样的奇怪字符串时失败了

��JFIFS��E��..

返回图像。

我设法获得了共享点文件的URL，当我将其放入浏览器时，它将自动下载图像。我还获得了accessToken以获取对文件的许可。

我尝试使用外部脚本中的base64编码器转换responseText，但无法显示为图像。顺便说一句，window.atob()或window.btoa()对于我的responseText似乎没有任何作用。

我不确定我从responseText收到的格式是哪种格式。因为我尝试将映像手动转换为base64进行测试，所以开始是这样

/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wB ..

。但是，通过使用我在网上找到的base64encoder获得的字符串就是这样

/ f39 / QAQSkZJRgABAQAAAQABAAD9 / QBDAAs ..

<div><img id="imgplaceholder" alt="place here"/></div>
<script>
var url =...;
var accessToken = ...;
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.setRequestHeader("Accept","application/json; odata=verbose");
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        var data = xhr.responseText;
        //or var data = base64Encode(data);
        document.getElementById("imgplaceholder").src = "data:image/jpeg;base64," + data;
    }else{
        alert(xhr.status + ":\n " + xhr.responseText);
    }
} 
</script>

我希望图像显示在中，但是什么也没有发生。我也尝试过使用ajax，但值得注意。有人可以帮我吗？

我正在关注这个https://sharepoint.stackexchange.com/questions/231251/fetch-and-display-image-from-sharepoint-list-javascript

Answer 1

希望以下脚本对您有所帮助。

<script type="text/javascript">        
    function Uint8ToBase64(u8Arr) {
        var CHUNK_SIZE = 0x8000; //arbitrary number
        var index = 0;
        var length = u8Arr.length;
        var result = '';
        var slice;
        while (index < length) {
            slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
            result += String.fromCharCode.apply(null, slice);
            index += CHUNK_SIZE;
        }
        return btoa(result);
    }
    $(function () {
        var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetFileByServerRelativeUrl('" + _spPageContextInfo.siteServerRelativeUrl + "/MyDoc/panda.jpg')/openbinarystream";
        var xhr = new window.XMLHttpRequest();
        xhr.open("GET", url, true);
        //Now set response type
        xhr.responseType = 'arraybuffer';
        xhr.addEventListener('load', function () {
            if (xhr.status === 200) {
                var sampleBytes = new Uint8Array(xhr.response);
                var imageBase64 = Uint8ToBase64(sampleBytes);
                document.getElementById("imgplaceholder").src = "data:image/jpeg;base64," + imageBase64;
            }
        })
        xhr.send();
    })

</script>
<div><img id="imgplaceholder" alt="place here" /></div>

如何将sharepoint中的responseText转换为图像？

1 个答案: