//转换为blob有跨域限制
var loadImageToBlob = function (url, callback) { if (!url || !callback) return false;
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';
xhr.onload = function () {
// 注意这里的this.response 是一个blob对象 就是文件对象
callback(this.status == 200 ? this.response : false);
}
xhr.send();
return true; }
$("#app-wraper img").each(function () {
loadImageToBlob($(this).attr("src"), function (blobFile) {
if (!blobFile) return false;
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(blobFile);
reader.οnlοad = function (e) {
//显示文件
var h = '<img src="' + this.result + '" alt="" />';
$("#result").append(h);
}
});
});

JS 图片转blob 转base64的更多相关文章

  1. JS图片上传后base64转码

    代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...

  2. js实现图片的Blob base64 ArrayBuffer 的各种转换

    一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort  处理abort事件.该事件在读取操作被中断时触发. Fil ...

  3. js 图片base64转file文件的两种方式

    js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...

  4. JS 实现blob与base64互转

    /** * base64 to blob二进制 */ function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0]. ...

  5. js 将图片文件转换成base64

      1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...

  6. js如何将选中图片文件转换成Base64字符串?

    如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...

  7. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. JS 图片转Base64

    JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...

  9. JS图片转Base64

    网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...

随机推荐

  1. Python学习之==>常用模块

    一.string模块 import string print(string.ascii_letters) # 所有大小写字母 print(string.ascii_lowercase) # 所有小写字 ...

  2. 宝塔面板修改用户名和密码报错:TypeError: cannot concatenate 'str' and 'NoneType' objects

    [root@dapao~]# bt 14 正在执行(14)... ================================================================== ...

  3. html不点击提交,自动post

    <!DOCTYPE html> <html> <form id="form1" name="form1" method=" ...

  4. 【ABAP系列】SAP ABAP 控制ALV单元格编辑后获取新的数值

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 控制ALV单元 ...

  5. Git push “fatal: Authentication failed ”

    Git push "fatal: Authentication failed " 问题原因 之前设置了两步验证 If you enabled two-factor authenti ...

  6. fastjson @JSONField

    此文来源于:https://blog.51cto.com/xiaok007/2164029 1.作用在FIELD(成员变量上) 注意:1.若属性是私有的,必须有set*方法.否则无法反序列化. pac ...

  7. Linux操作系统目录一览表

    / // 根目录 /bin //存放必要的命令 比如ls.cp.mkdir等命令 /boot //存放内核以及启动所需的文件 /dev //存放硬件设备文件 比如声卡.磁盘.光驱 /etc //存放系 ...

  8. postfix无法启动问题

    open /etc/postfix/main.cf comment out inet_interfaces: all add inet_protocol: ipv4

  9. for语句与if语句嵌套的简单应用

    1.循环语句 for(初始条件:循环条件:状态改变) { 循环体 } break为跳出循环,continue为结束此次循环. 2.死循环常用while语句 while(判断语句) { if(判断) { ...

  10. 期货、股指期权、ETF期权

    期货与期权: 期权是指一种合约,该合约赋予持有人在某一特定日期或该日之前的任何时间以固定价格购进或售出某种资产的权利. 期货是标准化的合约,赋予参与者在未来的某个时间点以约定好的一个价格去买入或者卖出 ...