Question

这不会发生在IE中，但在Chrome中，如果我打开一个jpeg，然后关闭模态，在模态中打开相同的jpeg会导致打开模态的响应时间并在每次调用时显示jpeg减慢。开发工具中没有问题。

这是模态代码：

<div class="container" ng-cloak>
        <div id="imageViewer" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
            <div class="modal-dialog modal-responsive">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Image Viewer</h4>
                    </div>
                    <div class="modal-body">
                        <img ng-src="data:image/jpeg;base64,{{imgDoc}}" width ="250px" height="250px"/>
                    </div>
                    <div class="modal-footer">
                        <span class="pull-right"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></span>
                    </div>
                </div>

            </div>
        </div>
    </div>

以下是我的控制器中的代码，它检索要从数据库显示的文件并将{{imgDoc}}设置为所选图像：

     $scope.getContractorDocument = function (d) {
    var id = d.FileImageReferenceID;
    contractorService.getdocument(id)
      .success(function (response) {
        var file = response[0];
        displayDocument(file);
      });
  };
    function displayDocument(file) {
    if (file.FileName == '' || file.FileName == null) {
      fileName = 'ContractorDocument';
    } else {
      fileName = file.FileName;
    }
    switch (file.vchMimeType) {

      case 'image/bmp':
      case 'image/gif':
      case 'image/jpeg':
      case 'img/jpg':
      case 'img/pjpeg':
      case 'image/png':

        $scope.imgDoc = base64ArrayBuffer(file.binFileImage);
        break;

    }


}

这是base64ArrayBuffer函数中的内容：

function base64ArrayBuffer(arrayBuffer) {
var base64 = '';
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';

var bytes = new Uint8Array(arrayBuffer);
var byteLength = bytes.byteLength;
var byteRemainder = byteLength % 3;
var mainLength = byteLength - byteRemainder;

var a, b, c, d;
var chunk;

// Main loop deals with bytes in chunks of 3
for (var i = 0; i < mainLength; i = i + 3) {
  // Combine the three bytes into a single integer
  chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];

  // Use bitmasks to extract 6-bit segments from the triplet
  a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
  b = (chunk & 258048) >> 12; // 258048   = (2^6 - 1) << 12
  c = (chunk & 4032) >> 6; // 4032     = (2^6 - 1) << 6
  d = chunk & 63; // 63       = 2^6 - 1

  // Convert the raw binary segments to the appropriate ASCII encoding
  base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}

// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
  chunk = bytes[mainLength];

  a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2

  // Set the 4 least significant bits to zero
  b = (chunk & 3) << 4; // 3   = 2^2 - 1

  base64 += encodings[a] + encodings[b] + '==';
} else if (byteRemainder == 2) {
  chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];

  a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
  b = (chunk & 1008) >> 4; // 1008  = (2^6 - 1) << 4

  // Set the 2 least significant bits to zero
  c = (chunk & 15) << 2; // 15    = 2^4 - 1

  base64 += encodings[a] + encodings[b] + encodings[c] + '=';
}

return base64;

}

使用以下方法打开模态：

data-toggle="modal" data-target="#imageViewer" ng-click="getContractorDocument(d)

jpeg第一次快速显示，但显示只是变得越来越慢，直到应用程序完全锁定。非常感谢任何帮助！

使用Chrome在Bootstrap Modal中打开jpeg会降低应用程序的速度

0 个答案: