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. [题解](排列/逆序对)luogu_P1338末日的传说

    首先我们要考虑怎么排能使逆序对数最多:显然是下降序列时,会产生n*(n-1)/2数量的逆序对 那么我们肯定是要尽量把序列的尾端安排成下降序列,前面的尽量不动,中间可能有一段排列自适应到m的逆序对数 然 ...

  2. HTTP的学习记录(二)头部

    本文主要讲一些 HTTP头部的信息 首先看一段 惊为天人 的文章. 来自于 <淘宝技术这十年> 你发现快要过年了,于是想给你的女朋友买一件毛衣,你打开了www.taobao.com.这时你 ...

  3. noip2018复习计划啊

    需要复习的算法额: exgcd CRT INV dij spfa(~) 矩阵快速幂~高斯消元 tarjan(scc,bcc) treap splay 线段树 dp(决策单调,斜率,四边形不等式) rh ...

  4. OpenLayers v4.2.0 -----地图延迟加载;

    官方:http://openlayers.org/en/latest/examples/lazy-source.html <!DOCTYPE html> <html> < ...

  5. mycat学习日记:关于联表查询

    https://www.cnblogs.com/toulon/p/4832895.html 在使用数据库中间件之前,我就想到分库分表的操作对于联表操作可能会显得非常复杂.因为如果数据是分片存储的,如果 ...

  6. 01-----jQuery介绍

    安装node.js cmd查看 node -v npm -v npm init --yes     初始化 npm install jquery --save   1.为什么要使用jQuery    ...

  7. Spark Mllib里的分层抽样(使用map作为分层抽样的数据标记)

    不多说,直接上干货! 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mllib数理统计

  8. Storm概念学习系列之Tuple元组(数据载体)

    不多说,直接上干货! Tuple元组 Tuple 是 Storm 的主要数据结构,并且是 Storm 中使用的最基本单元.数据模型和元组. Tuple 描述 Tuple 就是一个值列表, Tuple ...

  9. 【图解】我使用过的 Dubbo 和 Spring Cloud

    自从2015年毕业开始从事 Java 开发工作,已经过去3年多了, 在各种不知名的小公司待过,经历过生产力从低到高,技术从落后到先进的过程, Dubbo 和 Spring Cloud 就是我曾经所经历 ...

  10. 关于@webFilter使用@Order无效问题

    前言 在SpringBoot系列文章的<第七章:过滤器.监听器.拦截器>中,小技巧中指出,可使用@Order设置过滤器的执行顺序.由于没有自己求证过,看了相关材料后,想当然的写进了文章中, ...