Question

我是棱角分明的新手，我花了很多时间试图解决它：这个片段有效：

var xhr = new XMLHttpRequest();
    xhr.open( "GET",pic_url , true );
    xhr.responseType = "arraybuffer";
    xhr.onload = function( e ) {
            // Obtain a blob: URL for the image data.
            var arrayBufferView = new Uint8Array( this.response );
            var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
            var urlCreator = window.URL || window.webkitURL;
            var imageUrl = urlCreator.createObjectURL( blob );
            var img = document.querySelector( "#sh_pic" );
            img.src = imageUrl;
    };
    xhr.send();

当我尝试以角度方式进行时：在控制器中保持简单：

 delete $http.defaults.headers.common['X-Requested-With']
 $http.get(pic_url,{ headers: { responseType: 'blob'}} //arraybuffer
           ).success(function(response){ 
                     var arrayBufferView = new Uint8Array(response);
                     var urlCreator = window.URL || window.webkitURL;
                     var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
                     var imageUrl = urlCreator.createObjectURL( blob );
                     var sceImageUrl= $sce.trustAsResourceUrl(imageURL); //with or without
                     $scope.http_blob_pic_url = sceImageUrl ;
            });

并在配置中：

    $sceDelegateProvider.resourceUrlWhitelist(['self','**']);
    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image\//)
and 
<img id="http_blobImgId" ng-src="{{http_blob_pic_url}}" width=100 />

没有出现任何错误，blob生成的url位于img标记的ng-src和src属性中。浏览器中仍然没有图片。我尝试用以下方法调整它：responseType blob / arraybuffer with different bases，urlCreator，URL，$ window，..，CORS，sce，在angular的源代码中检查它们如何处理响应字符串和JSON处理，$ response的transformresponse，put服务中的片段，重做所有可能的诺言变体，尝试所有var声明作为控制器中的本地人和$ rootScope，并检查$ apply等。除了关于$ sce，$ compile等的错误之外，我在网上找不到任何东西。所以我假设我做了一些非常错误的事情，以便不做这样一个基本的事情。有点失落，请帮忙。感谢

角度不使用ng-src显示来自blob的jpeg

0 个答案: