var xhr = new XMLHttpRequest()
// 配置的代理,解决跨域问题
xhr.open('GET', url.replace('http://xxx.com', '/img'), true)
xhr.responseType = 'blob'
xhr.onload = function () {
if (xhr.status === 200) {
var reader = new FileReader()
reader.readAsDataURL(xhr.response)
reader.onloadend = function () {
var base64data = reader.result.replace(/^data:image\/(png|jpg);base64,/, "")
}
}
}
xhr.send()

总的来说就是将url先转blob,然后将blob转成base64

图片url转base64的更多相关文章

  1. Java通过图片url地址获取图片base64位字符串的两种方式

    工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...

  2. [前端性能提升]--图片转化为base64

    图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址 意义:网页上的每一个图片,都是需要消耗一个 http 请求下载而来的(所有才有了 csssprites 技术 ...

  3. 图片处理之 Base64

    网页上的图片资源如果采用 http 形式的 url 的话都会额外发送一次请求,网页发送的 http 请求次数越多,会造成页面加载速度越慢.而采用Base64格式的编码,将图片转化为字符串后,图片文件会 ...

  4. java 图片转换成base64字符串

    import java.io.ByteArrayOutputStream; import java.io.FileInputStream;import java.io.FileOutputStream ...

  5. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  6. js绝对地址图片转换成base64的方法

    //将图片转换成base64 function getBase64Image(url, callback){ var canvas = document.createElement('canvas') ...

  7. Base64图片编码原理,base64图片工具介绍,图片在线转换Base64

    Base64图片编码原理,base64图片工具介绍,图片在线转换Base64 DataURI 允许在HTML文档中嵌入小文件,可以使用 img 标签或 CSS 嵌入转换后的 Base64 编码,减少  ...

  8. 利用PHP将图片转换成base64编码的实现方法

    先来说一下为什么我们要对图片base64编码 base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于网络传输. ...

  9. Python cv2 OpenCV 中传统图片格式与 base64 转换

    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,是一种基于64个可打印字符来表示二进制数据的方法.通过http传输图片常常将图片数据转换成base64之后再进行传输. Base64简 ...

随机推荐

  1. sql 查找重复数据,并且重复数据有子集

    SELECT A.* FROM comm_department A INNER JOIN ( select path,count(*) as count from comm_department gr ...

  2. Linux系统下强制其他用户下线

    强制其他用户下线命令格式:pkill -kill -t tty 解释: pkill -kill -t 强制其他用户下线命令 tty 强制其他用户下线的TTY 如上强制其他用户下线的命令为: pkill ...

  3. CF E .Tree with Small Distances(树上的贪心)

    题意: 这是一颗有n-1条边的无向树 , 在树上加最少的边使树的1节点到其他节点的距离最多为 2 : 分析:很容易考虑的贪心的做法,但是该如何的贪心呢 ? 我一开始是打算贪心节点的儿子最多那一个 , ...

  4. HDU 6153 A Secret 套路,求解前缀在本串中出现的次数

    http://acm.hdu.edu.cn/showproblem.php?pid=6153 首先相当于翻转两个串,然后求s2前缀在s1中出现的次数. 这是一个套路啦 首先把两个串结合起来,中间加一个 ...

  5. TortoiseSVN 控制图标未显示或显示异常解决方法

  6. <llinux下kvm虚拟化>

    原理就是本来可能要10台物理机完成的事现在只要5台,分别在每台物理机上虚拟一台,这5太虚拟机共享一个stronge,比如有一台物理机down掉后或是要做维护,我们可以把它上面的虚拟机牵走,从而减少损失 ...

  7. 设置VS代码模板

    本文URL:http://www.cnblogs.com/CUIT-DX037/p/6770366.html 打开VS安装目录下:\Microsoft Visual Studio 12.0\Commo ...

  8. yum 安装Tomcat7(centos)

    yum 安装Tomcat7   其实最重要的就是yum源吗.初始源的里面既没有nginx也没有tomcat7. 1,搞定nginx,她家自己有源的: rpm -ivh http://nginx.org ...

  9. 【extjs6学习笔记】1.12 初始: Working with DOM

    http://www.extjs-tutorial.com/extjs/working-with-dom Ext JS是一个DHTML库. 它通过使用JavaScript创建或操作DOM元素来创建UI ...

  10. mustache.js 数组循环的索引

    在使用mustache作为模板引擎时,想要利用数组中的对象的索引排序,却发现mustache中无法获得数组索引,在一番搜索之后,发现在数组的对象中加入索引,就可以了,示例如下 /html {{#dat ...