JS 图片转blob 转base64
//转换为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的更多相关文章
- JS图片上传后base64转码
代码: // 获取文件流 var fileObj = document.getElementById('inputId').files; // 实例化一个FileReader对象 var reader ...
- js实现图片的Blob base64 ArrayBuffer 的各种转换
一.相关基础知识 构造函数 FileReader() 返回一个新构造的FileReader 事件处理 FileReader.onabort 处理abort事件.该事件在读取操作被中断时触发. Fil ...
- js 图片base64转file文件的两种方式
js 图片base64转file文件的两种方式 https://blog.csdn.net/yin13037173186/article/details/83302628 //将base64转换为bl ...
- JS 实现blob与base64互转
/** * base64 to blob二进制 */ function dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0]. ...
- js 将图片文件转换成base64
1.情景展示 在JavaScript中,如何使用图片文件转换成base64? 2.解决方案 /** * 网络图像文件转Base64 * @param img dom对象 */ function g ...
- js如何将选中图片文件转换成Base64字符串?
如何将input type="file"选中的文件转换成Base64的字符串呢? 1.首先了解一下为什么要把图片文件转换成Base64的字符串 在常规的web开发过程中,大部分上传 ...
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- JS 图片转Base64
JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决 ...
- JS图片转Base64
网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的 ...
随机推荐
- Eclipse高版本无法兼容FatJar的问题解决
发现eclipse打包jar无法连带打包第三方lib,于是选择安装插件fatjar,现在说明fatjar安装过程: 1.安装方法: 1)下载安装: https://sourceforge.ne ...
- 我们建了一个 Golang 硬核技术交流群(内含视频福利)
目录 目录 Golang 是什么? 我们为什么选择 Golang? Golang 是云时代的宠儿! 我们搞了一场 Golang 入门直播 Golang 是什么? Golang 是谷歌 2009 年发布 ...
- nginx排查502错误
排查502错误1.查看/usr/local/nginx/conf/nginx.conf从而知道其错误日志在哪.重点查看其错误日志.2.如果是/tmp/dd.sock2017/05/01 18:48:3 ...
- linux iptables相关
iptables -A INPUT -p udp --dport 90 -j ACCEPT iptables -A INPUT -p tcp -m state --state ESTABLISHED ...
- Eclipse 添加Hibernate 插件
打开Eclipse, Help-->Eclipse Marketplace 在搜索框输入JBoss-Tools ,回车 根据搜索结果选择与自己Eclipse版本匹配的JBoss,然后点击 ...
- struts2 2.5.16 通配符方式调用action中的方法报404
1.问题描述 在struts.xml中配置用通配符方式调用action中的add()方法,访问 http://localhost:8080/Struts2Demo/helloworld_add.act ...
- 【组策略】1.组策略介绍group policy
组策略介绍group policy 高效学习法,念念不忘,必有回响. 分享一个高效学习思维,潜意识思考.就是在您没有大量时间的情况下,学习十分钟. 然后离开去完成别的事情的时候,大脑潜意识中还会继续思 ...
- Java基础/Socket.io双向通信
Socket.io基础知识(一) (一).socket.io提供了基于事件的实时双向通讯 Web端与服务端实时数据传输方式: 1.Ajax轮询方式(最早应用) 原理:设置定时器,定时通过Ajax同 ...
- 二、Zabbix-zabbix server部署-LNMP
部署Zabbix server主要分为两部分(软件基本都是yum安装,不要问我为什么不用源码,因为没有必须用源码的需求) 一.部署LNMP/LAMP环境,已提供zabbix的界面展示,已经zabbix ...
- 剑指Offer编程题(Java实现)——两个链表的第一个公共结点
题目描述: 输入两个链表,找出它们的第一个公共结点. 思路一: 设 A 的长度为 a + c,B 的长度为 b + c,其中 c 为尾部公共部分长度,可知 a + c + b = b + c + a. ...