用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;

}

时间: 2024-10-12 23:12:55

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

java getResourcesAsStream()如何获取WEB-INF下的文件流

getResourcesAsStream()来读取.properties文件,但是getResourcesAsStream()仅在java项目时能获取根目录的文件: 在web项目中,getResourcesAsStream()是获取classes目录的根路径 例如:文件在WEB-INF/conf/conf.properties. private Properties readConf(){ InputStream is = null; try{ //获取classes的路径,注意:由于转码的原因

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

原生js获取css中class的方法

function getByClass( className, context) { var context = context || document; if( context.getElementsByClassName) { return context.getElementsByClassName(className); } var nodes = context.getElementsByTagName("*"); ret=[]; for( var i=0; i<nod

文件_ _android从资源文件中读取文件流并显示的方法

======== 1   android从资源文件中读取文件流并显示的方法. 在android中,假如有的文本文件,比如TXT放在raw下,要直接读取出来,放到屏幕中显示,可以这样: private void doRaw(){ InputStream is = this.getResources().openRawResource(R.raw.ziliao); try{ doRead(is); }catch(IOException e){ e.printStackTrace(); } } pri

【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redirect(Request.UrlReferrer.ToString());} else { //没有来路地址 Response.Redirect("index.aspx"); 二.Js获取table中的行数与列数 var table =document.getElementById(&qu

js获取url中的参数,并保证获取到的参数不乱码

  //网上比较经典的js获取url中的参数的方法  function getQueryString(name) {      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");      var r = window.location.search.substr(1).match(reg);      if ( r != null ){        

js获取URL中的参数

js获取URL中的一些参数的意思 location对象 含有当前URL的信息. 属性 href 整个URL字符串. protocol 含有URL第一部分的字符串,如http: host 包含有URL中主机名:端口号部分的字符串.如//www.cenpok.net/server/ hostname 包含URL中主机名的字符串.如http://www.cenpok.net ; port 包含URL中可能存在的端口号字符串. pathname URL中"/"以后的部分.如~list/inde

JS获取URL中参数值(QueryString)的4种方法分享

http://www.jb51.net/article/48942.htm JS获取URL中参数值(QueryString)的4种方法分享 作者: 字体:[增加 减小] 类型:转载 今天碰到要在一个页面获取另外一个页面url传过来的参数,一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数.后来想了一下,肯定会有更加简单的方法的!所以在网上找到了几个很又简单实用的方法,mark下. 方法一:正则法 复制代码 代码如下: function getQueryString

背水一战 Windows 10 (90) - 文件系统: 获取 Package 中的文件, 可移动存储中的文件操作, “库”管理

[源码下载] 背水一战 Windows 10 (90) - 文件系统: 获取 Package 中的文件, 可移动存储中的文件操作, “库”管理 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获取 Package 中的文件 可移动存储中的文件操作 “库”管理 示例1.演示如何获取 Package 中的文件FileSystem/PackageData/Demo.xaml <Page x:Class="Windows10.FileSystem.PackageData.D