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、小程序等前端开发框架中。

相关文章
|
人工智能 移动开发 JavaScript
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
如何用uniapp打包桌面客户端exe包,vue或者uni项目如何打包桌面客户端之electron开发-优雅草央千澈以开源蜻蜓AI工具为例子演示完整教程-开源代码附上
2155 18
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5268 1
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
714 0
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
1031 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
482 19
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
供应链 JavaScript 数据管理
uniapp/vue如何实现一个子表单及子表单作用
uniapp/vue如何实现一个子表单及子表单作用
533 5
|
搜索推荐 JavaScript 数据可视化
uniapp/vue个性化单选、复选组件
uniapp/vue个性化单选、复选组件
680 5
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
1040 0

热门文章

最新文章