//转换为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. 1、maven的下载,安装,配置

    下载 1.maven官方下载地址: http://maven.apache.org/download.cgi 进入官网: 下载各历史版本官方地址: https://archive.apache.org ...

  2. 【pycharm】Mac版快捷键

    首先是快捷键的设置,Mac中是在菜单栏的Pycharn/Preference/Keymap中 [快速调试] 1.看函数.方法最初在哪里创建的,这个方法很好用,查看内置函数之类的  按住command, ...

  3. 【python】将json串写入文件,并以json格式读取出来

    写json--json.dumps 代码: import json #要写入文件的json串(dict格式) result ={', 'https://appapi.xxxx.com/appapi/b ...

  4. HTML学习之==>JS

    HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python.Go.Java.C++等,都是一种 ...

  5. C# user32.dll找窗口时,使用GetClass方法解决 【带有系统自动编译的窗体类后缀名】 问题

    [DllImport("user32.dll", SetLastError = true, CharSet = CharSet.Auto)] static extern int G ...

  6. oracle expdp/impdp/可传输表空间

    oracle expdp/impdp/可传输表空间/及一些参数 Oracle data pump 导出操作能够将表.索引.约束.权限.PLSQL包.同义词等对象从数据库导出,并将它们保存在一种非文本格 ...

  7. struts2默认action设置了却访问不到

    1.错误原因 我的package中共有两个action,第一个是默认action,用于访问的action不存在时候的出错处理,第二个是通配符方式写的action,name采用*_*形式的全通配符.配置 ...

  8. Linux-SSH远程管理服务实战

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  9. 【Linux 环境搭建】安装arm-linux-gcc

    (1)下载或者拷贝arm-linux-gcc-4.3.2.tgz到Linux环境的任意目录. 解压: tar xvf arm-linux-gcc-4.3.2.tgz ,会解压该文件到当前目录: 拷贝: ...

  10. 剑指Offer编程题(Java实现)——删除链表中重复的结点

    题目描述 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...