js：图片url转base64编码

思路：

将图片url转为Image对象
将Image对象绘制到Canvas上
将Canvas对象转为Base64

实现代码

// Image对象转base64
function imageToBase64(image) {let canvas = document.createElement('canvas')let width = image.widthlet height = image.heightcanvas.width = widthcanvas.height = heightlet 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

js：图片url转base64编码相关推荐

python如何将网络上的图片url和base64编码的图片保存在本地
1.python base64编码的图片保存到本地 import os import base64 sss ="""/9j/4AAQSkZJRgABAQEASABIAAD ...
通过图片url转化base64
根据一直url转化为base64返回实现方式:通过图片URL获取二进制流,再对字节数组进行Base64编码转换工具类 package com.dajia.zlb.util;import sun.m ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
base64转html文件,图片转换成Base64编码集成到html文件
首先为什么要这么做? 原因很简单这样可以减少与服务器的请求,当然对于一些浏览器并不支持,如IE8.通常用在手机版网站中,具体转化方法如下: 1.在线打开Base64的编码器将图片编码成Base64 ...
Java实现读取服务器上的图片并进行base64编码
实现代码如下: /*** 图片地址进行Base64编码* @param imgUrl* @return*/ public static String image2Base64(String imgUr ...
图片Url转换Base64
java 图片Url转换Base64 1.引用依赖 <?xml version="1.0" encoding="UTF-8"?> <proje ...
Python将图片转化为base64编码以及如何在html网页上显示
1.Python将图片转化为base64编码 test.py # -*- coding: utf-8 -*- import base64 #这一段代码时间图片转化为base64 with open(& ...
图片链接转base64编码
图片链接转base64编码工具类 import java.io.*; import java.net.HttpURLConnection; import java.net.URL; import su ...
JAVA解析html文档，替换img图片路径成base64编码，并将文章存入数据库
转载自 JAVA解析html文档,替换img图片路径成base64编码,并将文章存入数据库开发环境:struts2+ spring + hibernate 数据库:oracle 需求:在HTML编 ...

js：图片url转base64编码

js：图片url转base64编码相关推荐

最新文章

热门文章