码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-03-18 13:16:57      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

function displayHtmlWithImageStream(bodyHtml) {

    var imgReg = /<img.*?(?:>|\/>)/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;

}

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

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!