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. iOS获取手机型号、iOS获取当前app的名称和版本号

    NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...

  2. JS精粹知识点和我的解释

    函数若是不return则默认返回undefined const value=()=>{ let a=3; } let value_test; console.log(value(),value_ ...

  3. Word中图片自动编号且与文中引用的编号对应

    当我们在进行大篇幅 word 文档的编写时, 为了节约修改文章中图片所花费的大量时间, 可以将图片自动编号,且让文中引用的顺序跟着图片顺序的变化而变化,具体操作如下: 1. 将鼠标定在欲加编号的下方, ...

  4. Silverlight 登陆界面

    美术水平有限,不喜勿喷. 界面代码,效果如下图 <UserControl x:Class="ElecDemoTelerikSL.Login" xmlns="http ...

  5. Git把旧仓库的分支拉到新仓库中

    背景:项目新建了个git仓库(B仓库),放改版的新项目,现在运维所有项目构建都是在一个Jenkins里构建,然后拉镜像到相应服务器里,为了不让运维每次构建不同项目需要改git仓库地址,需要把原来项目仓 ...

  6. net core 的Generic Host 之Generic Host Builder

    前言 通用Host(Generic Host) 与 web Host 不同的地方就是通用Host解耦了Http请求管道,使得通用Host拥有更广的应用场景.比如:消息收发.后台任务以及其他非http的 ...

  7. 修改response,报错Cannot call getWriter(), getOutputStream() already called

    往response里面改数据,然后系统报这个错 此时直接return null即可解决 但是,要想返回相应的页面呢? 可以直接在response里设置返回的页面

  8. Spring整合Struts2 注解版

    1.jar包 <!--spring配置--> <dependency> <groupId>org.springframework</groupId> & ...

  9. Google常用拓展插件

    1.web前端助手(FEhelper)提供一些实用的前端小工具,功能十分贴心 2.bookMarks Manager 一个书签管理工具 3.Clear Cache 清除浏览器的缓存,有很多供选择的条目 ...

  10. javascript的常用操作(二)

    Undefined 不是 Null 在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法. 对象只有被定义才有可能为 null,否则为 undefined. ...