js:图片url转base64编码

简介: js:图片url转base64编码

思路:

  1. 将图片url转为Image对象
  2. 将Image对象绘制到Canvas上
  3. 将Canvas对象转为Base64

实现代码

// Image对象转base64
function imageToBase64(image) {
    let canvas = document.createElement('canvas')
    let width = image.width
    let height = image.height
    canvas.width = width
    canvas.height = height
    let context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, width, height)
    return canvas.toDataURL('image/png')
}
// 回调方式
function urlToBase64(url, callback = null) {
    let image = new Image()
    image.setAttribute('crossOrigin', 'Anonymous')
    image.src = url + '?v=' + Math.random()
    image.onload = function () {
      let dataURL = imageToBase64(image)
      if (callback) {
        callback(dataURL)
      }
    }
}
// Promise方式
function urlToBase64Async(url) {
    return new Promise((resolve, reject) => {
      urlToBase64(url, (data) => {
        resolve(data)
      })
    })
}
(async () => {
    let image_url ='https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
    const dataURL = await urlToBase64Async(image_url)
    console.log(dataURL)
    // data:image/png;base64,iVBORw0KGgoAAAANSU
})()

需要注意的是:

浏览器中有跨域问题的存在,所以浏览器端处理的图片地址,需要确保允许跨域

参考

vue、JS图片url转base64

相关文章
|
2天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
2天前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
|
4天前
|
JavaScript 前端开发
javascript获取url信息的常见方法
javascript获取url信息的常见方法
18 2
|
4天前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
|
4天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
4天前
|
JavaScript
js如何实现修改URL参数并不刷新页面
js如何实现修改URL参数并不刷新页面
|
4天前
|
存储 网络协议 网络安全
对象存储oss使用问题之私有图片url在服务器中无法直接打开如何解决
《对象存储OSS操作报错合集》精选了用户在使用阿里云对象存储服务(OSS)过程中出现的各种常见及疑难报错情况,包括但不限于权限问题、上传下载异常、Bucket配置错误、网络连接问题、跨域资源共享(CORS)设定错误、数据一致性问题以及API调用失败等场景。为用户降低故障排查时间,确保OSS服务的稳定运行与高效利用。
85 0
|
Web App开发 JavaScript 前端开发
|
JavaScript 算法 前端开发
|
JavaScript 前端开发
Javascript Base64编码与解码
原文:【转】Javascript Base64编码与解码 Base64 Encode and Decode var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz01...
764 0