-
需要了解 canvas的基本操作，canvas.toDataURL 方法
HTMLCanvasElement.toDataURL()
方法返回一个包含图片展示的
data URI
。可以使用
type
参数其类型，默认为
PNG
格式。图片的分辨率为 96dpi。
-
【webapck+vue项目】需要用 require('@/assets/xxx.png') 引入图片，不能直接写 【'@/assets/xxx.png'】这个字符串
-
【vite+vue项目】需要使用import xxx from 'xxx.png'引入图片
-
仅可以转换图片类型的数据
// 注意图片的，onload是异步的，如果要封装成工具函数，需要用promise包装一下
async function imgToBase64(url) {
return new Promise((resolve, reject) => {
const image = new Image()
image.src = url
image.onload = () => {
const canvas = document.createElement('canvas')
canvas.width = image.naturalWidth // 使用 naturalWidth 为了保证图片的清晰度
canvas.height = image.naturalHeight
canvas.style.width = `${canvas.width / window.devicePixelRatio}px`
canvas.style.height = `${canvas.height / window.devicePixelRatio}px`
const ctx = canvas.getContext('2d')
if (!ctx) {
return null
ctx.drawImage(image, 0, 0)
const base64 = canvas.toDataURL('image/png')
return resolve(base64)
image.onerror = (err) => {
return reject(err);
// 引入项目中的图片
const imgUrl = require('xxx.png');
imgToBase64(imgUrl).then(res => {
if(res) {
console.log('生成的base64图片', res)
}).catch(err => {
console.log('这里是错误', err);
场景二，有一个公开的url，比如https//xx.png 或者项目public目录下的图片，重点如下
- 使用 ajax + FileReader
- ajax 异步请求使用XMLHttpRequest、fetch、axios都可以
- 需要将请求的返回格式 responseType 转成 Blob 格式
- 这种方法也适用于文件转成 base64
getBase64(imgUrl) {
let xhr = new XMLHttpRequest();
xhr.open('get', '/xxx.jpg', true);
// 重点1
xhr.responseType = 'blob';
xhr.onload = function() {
if (this.status == 200) {
//得到一个blob对象
let blob = this.response;
// 重点2
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
// 结果
const base64 = e.target.result
oFileReader.readAsDataURL(blob);
xhr.send();
使用 fetch api请求，大同小异，重点都是 responseType 要设置为blob，再使用 FileReader 的 readAsDataURL 方法把 blob 转成 base64
function getBase64(imgUrl) {
var xhr = new XMLHttpRequest();
fetch(imgUrl, {
responseType: 'blob'
.then(response => {
return response.blob();
.then(blob => {
let oFileReader = new FileReader();
oFileReader.onloadend = function(e) {
// base64结果
const base64 = e.target.result
oFileReader.readAsDataURL(blob);
发现没有？方法一是用的 HTMLCanvasElement.toDataURL() 和 方法二是用的 FileReader.readAsDataURL() 都有一个【DataURL】，这就说明这个【dataURL】是和base64有关系的，所以，以后无论是文件，还是图片转成base64都需要先想到带有【dataURL】的方法。
Data URL，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。
bae64的图片/文字就是一种Data URL
请看官方文档
Data URL - HTTP | MDNData URL，即前缀为 data: 协议的 URL，其允许内容创建者向文档中嵌入小文件。它们之前被称作“data URI”，直到这个名字被 WHATWG 弃用。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
第一种： 直接把要嵌入的JS文件属性设置为“嵌入的资源”。protected override void OnInit(EventArgs e) { base.OnInit (e); if(!base.Page.IsStartupScriptRegistered(“Script”)) { Assembly assembly = typeof(TestControl).Assembly; StreamReader reader = null; reader
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" conte.
您可以使用FileReader对象将本地文件读取为DataURL，然后将DataURL转换为Base64字符串。以下是一个示例函数，可以将图像文件转换为Base64字符串：
function fileToBase64(file, callback) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
var result = reader.result;
callback(result.slice(result.indexOf('base64,') + 'base64,'.length));
该函数需要两个参数：文件对象和回调函数。调用该函数后，会将文件转换为Base64字符串并将其传递给回调函数。
示例用法：
var file = document.getElementById('file-input').files[0];
fileToBase64(file, function(base64String) {
// 处理Base64字符串
其中，file-input是一个输入文件类型的HTML元素，通过用户上传文件并选择要转换的图像文件。
【问题解决】Failed to load module script: Expected a JavaScript module script but the server respond
25426
