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

相关文章
|
4月前
|
Java
Java开发实现图片URL地址检验,如何编码?
【10月更文挑战第14天】Java开发实现图片URL地址检验,如何编码?
134 4
|
29天前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
42 19
|
2月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
3月前
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
109 3
|
4月前
|
存储 开发框架 JavaScript
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
128 0
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
|
5月前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
5月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
5月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
79 0
|
6月前
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
|
6月前
|
Java
JAVA 获取 URL 指定参数的值
JAVA 获取 URL 指定参数的值
66 0

热门文章

最新文章