替换html文件里的图片,用JS获取Html中所有图片文件流然后替换原有链接

function displayHtmlWithImageStream(bodyHtml) {

var imgReg = /|\/>)/gi;

var arr = bodyHtml.match(imgReg);

if (arr != null) {

for (var i = 0; i < arr.length; i++) {

replaceImageUrlWithStream(bodyHtml, arr, i);

}

}

}

function replaceImageUrlWithStream(bodyHtml, arr, i) {

$scope.body = bodyHtml;

var images = arr[i];

var srcReg = /src=[\‘\"]?([^\‘\"]*)[\‘\"]?/i;

var src = images.match(srcReg);

var url = src[1];

var type = ‘image/‘ + url.split(‘.‘).pop();

var imgDataObject = {};

assetHelper.getAsset(url, imgDataObject, getAssetSuccess, getAssetError);

function getAssetSuccess(data) {

var imgDataUrl = data.url;

$scope.body = $scope.body.replace(url, ‘data:‘ + type + ‘;base64,‘ + imgDataUrl);

}

}

function getAssetError(url, reason) {

$scope.body = $scope.body.replace(url, ‘#‘);

}

function getAsset(url, assetModel, success, fail) {

serviceBase.get({ url: url, responseType: ‘arraybuffer‘ })

.success(function (response) {

assetModel.url = base64ArrayBuffer(response);

success(assetModel);

})

.error(function (url, reason) {

fail(url, reason);

});

}

// Converts an ArrayBuffer directly to base64, without any intermediate ‘convert to string then

// use window.btoa‘ step. According to my tests, this appears to be a faster approach:

// http://jsperf.com/encoding-xhr-image-data/5

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;

}

原文:http://www.cnblogs.com/xiaxianfei/p/5291618.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值