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

Posted 金木龙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS获取Html中所有图片文件流然后替换原有链接相关的知识,希望对你有一定的参考价值。

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中所有图片文件流然后替换原有链接的主要内容,如果未能解决你的问题,请参考以下文章

将表情字符转换成对应的图片 用js

wpf遍历文件夹获取所有图片路径后,怎么关闭图片流

python爬虫 将在线html网页中的图片链接替换成本地链接并将html文件下载到本地

Js实现瀑布流效果

Node.js读写文件之批量替换图片

JS 把纯字符串,替换成有链接的图片形式,比如/uploads/101207/1.jpg变成图片显示有链接的也就是HTML代码