uniapp、vue、小程序、js图片转base64 示例代码

简介: uniapp、vue、小程序、js图片转base64 示例代码

以下是一个示例代码,用于将图片转换为base64字符串:

// 将图片转为 base64 编码
function imageToBase64(imageUrl, callback) {
  // 创建一个 Image 对象
  const img = new Image();
  // 确保图片已完全加载
  img.onload = function () {
    // 创建一个 Canvas 元素
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    // 设置 Canvas 的宽高等于图片的宽高
    canvas.width = img.width;
    canvas.height = img.height;
    // 将图片绘制到 Canvas 上
    ctx.drawImage(img, 0, 0);
    // 获取图片的 base64 编码
    const base64 = canvas.toDataURL('image/png');
    // 执行回调函数,将 base64 字符串作为参数传递出去
    callback(base64);
  }
  // 加载图片
  img.src = imageUrl;
}
// 示例调用
const imageUrl = 'https://example.com/image.jpg';
imageToBase64(imageUrl, function (base64) {
  console.log(base64);
});

这段代码中,通过创建一个Image对象,加载图片并确保图片已完全加载后,创建一个Canvas元素,将图片绘制到Canvas上,并使用toDataURL方法将Canvas内容转换为base64编码。

你可以将这段代码使用在uni-app、Vue、小程序等前端开发框架中。

相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
743 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
存储 JavaScript 前端开发
JS上传文件(base64字符串和二进制文件流)
这篇文章介绍了两种JavaScript文件上传的方法:使用FileReader对象将文件读取为base64字符串上传,以及使用FormData对象以二进制文件流的形式上传文件,包括如何处理文件选择、读取和上传的详细代码示例。
1764 2
JS上传文件(base64字符串和二进制文件流)
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
4940 1
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
560 167
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
4024 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
937 0