前端图片url转base64

前端的图片转base64主要依靠canvas(画布)这个对象的toDataURL方法。有关canvas的文档：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL注意一下：这个对象只有在前端环境下才存在,后端node环境下是没有canvas这个对象的，所以本篇博客才要分前后端来讲。

export const imageToBase64 = (img) => {var canvas = document.createElement("canvas"); //创建一个canvas对象//初始化canvas.width = img.width;canvas.height = img.height;//也是初始化，getContext("2d")这个方法表示创建一个2d的画布，详情可以看文档var ctx = canvas.getContext("2d");// 把我们创建的图片传入，画布创建完毕ctx.drawImage(img, 0, 0, img.width, img.height);var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();//我们要的base64就拿到了var dataURL = canvas.toDataURL("image/jpeg" + ext);return dataURL;

上面方法的参数是个img，这里创建我们的image对象

export const getImage = (url, cb) => {var image = new Image();image.src = url; // onload事件，image一旦加载完就会触发image.onload = function () {let base64 = imageToBase64(image); //这里就将我们的图片传入给canvas了//因为是在onload事件内，所以结果要以回调的形式返回cb && typeof cb == 'function' && cb(base64);}
}

 注意！上面代码的image的url，得是网络地址，就是http:xxxx格式的，本地地址我试过好多次，不管是绝对路径还是相对路径都不行。url无效的话后面的操作都进行不下去，会报一个图片不存在的错误，或者什么错的不报。关于为什么本地地址无效的问题我也没搞懂，如果看完这篇博客有知道的同学欢迎留言！

最后使用

getImage('你的图片url',(res)=>{//res就是最终结果console.log(res)
})

后端图片转base64

var http = require('http');async function imgUrlToBase64(url) {let base64Imgreturn new Promise(function (resolve, reject) {//这里的回调函数中的响应对象res中并不携带响应数据，他是一个http.ClientRequest类的实例。想了解的可以看上面文档的链接//我们要获取服务器响应的数据，得要用这个实例监听一个data事件。//这里的url就是图片网络地址let req = http.get(url, function (res) {//如果用express开发的话var chunks = [];var size = 0;res.on('data', function (chunk) {chunks.push(chunk);      //把每一次接收的byts存进去size += chunk.length;　　//累加缓冲数据的长度});res.on('end', function (err) { var data = Buffer.concat(chunks, size); base64Img = data.toString('base64');resolve({ success: true, base64Img });});})req.on('error', (e) => {resolve({ success: false, errmsg: e.message });});req.end();})
}
module.exports = {imgUrlToBase64
}

最后使用。这里再说下为什么要分前后端的问题，因为图片url转成base64后太大了，你要是在前端做有的人家第三方的接口不给你传那么大的数据，所以各位看需求选择吧。

    const base64 =await imgUrlToBase64(imgPath)console.log(base64) //最后结果

图片转base64（前后端）相关推荐

Base64 混淆加密+迭代次数，Base64前后端加解密不一致、Base64 js加解密结果与java加解密结果不一致，Base64中文加密乱码
Table of Contents 概述一.js加密,java解密 1.js加密 1.中文字符串加密 2.英文等字符串加密 3.中文字符串混淆.迭代加密 4.英文等字符串混淆.迭代加密 5.JSON ...
UEditor之基于Java图片上传前后端源码研究
那么开始吧! 这是我的项目目录 1.从访问路径http://localhost:8081/Test/_examples/simpleDemo.html,我们主要是要看看,富文本框被加载出来之前,会调用 ...
javascript 图片转base64（免费源码）
图片转base64 前几天我看微信小程序不能上传本地图片了只能用网络链接和base64位的链接网上虽然有很多免费转换的网站但私密照片上传网上感觉还是不妥于是用javascript写了 ...
学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密
学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密技术标签: RSA AES RSA AES 混合加密整合前言: 为了提高安全性采用了RSA,但 ...
前后端传图片用base64好吗_Base64是什么？前端用Base64加载图片到底好不好？
相信无论是前端还是后端开发工程师,对于Base64都不会感到陌生,在开发中我们经常会将一些小图片以Base64的形式存储和加载.然而知其然也要知其所以然,Base64究竟是什么,我们为什么要使用Bas ...
Vue+Spring Boot实现图片验证码、邮箱验证码以及Cookie记住我功能(前后端代码详解)
Vue实现图片验证码.邮箱验证码以及Cookie记住我功能前言图片验证码实现 Vue前端实现 Spring Boot后端实现邮箱验证码实现 Vue前端实现 Spring Boot后端实现 Coo ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
springboot前后端分离前端请求图片问题
1.前后端分离的情况下,前端通过服务器请求后端图片,通常是后端把图片放在服务器上的指定文件夹中,然后写一个配置类,前端访问后端数据库的图片路径,然后后端在配置文件中做文件映射,前端访问数据库的图片路径 ...

图片转base64（前后端）

前端图片url转base64

后端图片转base64

图片转base64（前后端）相关推荐

最新文章

热门文章