//转换为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. hashMap与 hashTable , ArrayList与linkedList 的区别(详细)

    ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦LinkedList 采用的将对象存放在独立的空间中,而且在每个空间中还保存下一个 ...

  2. lua源码学习篇二:语法分析

    一步步调试,在lparser.c文件中luaY_parser函数是语法分析的重点函数,词法分析也是在这个过程中调用的.在这个过程中,用到一些数据结构,下面会详细说. Proto *luaY_parse ...

  3. 【Python】我的豆瓣短评爬虫的多线程改写

    对之前我的那个豆瓣的短评的爬虫,进行了一下架构性的改动.尽可能实现了模块的分离.但是总是感觉不完美.暂时也没心情折腾了. 同时也添加了多线程的实现.具体过程见下. 改动 独立出来的部分: MakeOp ...

  4. .net core 学习小结之 JWT 认证授权

    新增配置文件 { "Logging": { "IncludeScopes": false, "Debug": { "LogLeve ...

  5. 将python 2.6 升级到 2.7,及pip安装

    由于CentOS6.5 自带python版本为2.6.6,实际中使用的大多为2.7.x版本.于是手动升级. 查看python的版本 #python -VPython 2.6.6 1.下载Python- ...

  6. jQuery中this与$(this)的区别总结

    这里就谈谈this与$(this)的区别. 1.jQuery中this与$(this)的区别 $("#textbox").hover( function() { this.titl ...

  7. Eureka 源码分析之 Eureka Server

    文章首发于公众号<程序员果果> 地址 : https://mp.weixin.qq.com/s/FfJrAGQuHyVrsedtbr0Ihw 简介 上一篇文章<Eureka 源码分析 ...

  8. 状态压缩dp相关

    状态压缩dp 状态压缩是设计dp状态的一种方式. 当普通的dp状态维数很多(或者说维数与输入数据有关),但每一维总 量很少是,可以将多维状态压缩为一维来记录. 这种题目最明显的特征就是: 都存在某一给 ...

  9. shell学习笔记2---执行Shell脚本(多种方法)

    在新进程中运行 Shell 脚本 1) 将 Shell 脚本作为程序运行 切换到脚本所在位置(还要给脚本加上可执行权限) [mozhiyan@localhost demo]$ ./test.sh #执 ...

  10. Django @csrf_exempt不适用于基于通用视图的类(Django @csrf_exempt does not work on generic view based class)

    class ChromeLoginView(View): def get(self, request): return JsonResponse({'status': request.user.is_ ...