js将图片转base64两种方法

第一种：Image + canvas

const getBase64Image = src => {return new Promise(resolve => {const img = new Image()img.crossOrigin = ''img.src = srcimg.onload = function () {const canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightconst ctx = canvas.getContext('2d')ctx?.drawImage(img, 0, 0, img.width, img.height)const ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()const dataURL = canvas.toDataURL('image/' + ext)resolve(dataURL)}})
}

第二种：xhr + FileReader

const getBase64Image = src => {return new Promise(resolve => {let xhr = new XMLHttpRequest()xhr.open('get', src, true)xhr.responseType = 'blob'xhr.onload = function () {if (this.status == 200) {let blob = this.responselet oFileReader = new FileReader()oFileReader.onloadend = function (e) {const base64 = e.target.resultresolve(base64)}oFileReader.readAsDataURL(blob)}}xhr.send()})
}

js将图片转base64两种方法相关推荐

iOS: JS和Native交互的两种方法，iosjsnative交互
iOS: JS和Native交互的两种方法,iosjsnative交互背景: UIWebView: iOS 用来展示 web 端内容的控件. 1. 核心方法: - (NSString*)string ...
qt 加载图片旋转_QT 实现图片旋转的两种方法
第一种方案使用 QPixmap 的 transformed 函数来实现旋转,这个函数默认是以图片中心为旋转点,不能设置旋转的中心点,使用如下: QMatrix matrix; matrix.rota ...
android 图片叠加xml,Android实现图片叠加效果的两种方法
本文实例讲述了Android实现图片叠加效果的两种方法.,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(View v) { // ...
JS区分中英文字符的两种方法
JS区分中英文字符的两种方法: 正则和charCodeAt()方法. 正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. ...
pytorch加载自己的图片数据集的两种方法
目录 ImageFolder 加载数据集使用pytorch提供的Dataset类创建自己的数据集. Dataset加载数据集接下来我们就可以构建我们的网络架构: 训练我们的网络: 保存网络模型(这 ...
D3D中2D图片的绘制两种方法
2014/09/19 (转载自:http://blog.csdn.net/rabbit729/article/details/6388703) 想要在D3D中加载2D图片可以使用如下两种方法(我只想到 ...
android 画布叠加,Android实现图片叠加效果的两种方法
本文实例讲述了Android实现图片叠加效果的两种方法.分享给大家供大家参考,具体如下: 效果图: 第一种: 第二种: 第一种是通过canvas画出来的效果: public void first(Vi ...
java 图片压缩100k_Java 实现图片压缩的两种方法
问题背景. 典型的情景:Nemo社区中,用户上传的图片免不了要在某处给用户做展示. 如用户上传的头像,那么其他用户在浏览该用户信息的时候,就会需要回显头像信息了. 用户上传的原图可能由于清晰度较高而体 ...
js循环添加事件的两种方法
js循环添加事件的两种方法选择下拉列表中的一个li将文本传到框中问题:写此二级菜单时用到的方法不好,对此进行优化原始js代码: <script>// 思路:1.点击下拉框a时,ul中 ...

js将图片转base64两种方法

js将图片转base64两种方法相关推荐

最新文章

热门文章