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

uniapp是一款跨平台的应用开发框架，基于Vue.js和小程序原生能力进行封装，旨在帮助开发者快速构建跨平台的应用程序。在uniapp中，可以使用Vue.js语法进行页面开发，同时通过使用小程序原生能力，可以实现调用设备的摄像头、访问本地存储、获取地理位置等功能。

示例一：

在uniapp中，可以使用JavaScript将图片转换为base64编码。Base64编码是一种将二进制数据转换为可见字符的编码方式，可以将图片以文本方式存储或传输。下面是一个示例代码，演示如何在uniapp中使用Vue.js和JavaScript将图片转换为base64编码：

<template>
? <div>
? ? <input type="file" @change="handleFileChange" />
? ? <button @click="convertToBase64">转换为Base64</button>
? ? <img :src="imageUrl" alt="转换后的图片" />
? </div>
</template>

<script>
export default {
? data() {
? ? return {
? ? ? imageUrl: '',
? ? ? file: null
? ? };
? },
? methods: {
? ? handleFileChange(e) {
? ? ? this.file = e.target.files[0];
? ? },
? ? convertToBase64() {
? ? ? if (this.file) {
? ? ? ? const reader = new FileReader();
? ? ? ? reader.readAsDataURL(this.file);
? ? ? ? reader.onload = (e) => {
? ? ? ? ? this.imageUrl = e.target.result;
? ? ? ? };
? ? ? }
? ? }
? }
};
</script>

以上示例代码演示了一个简单的页面，其中包含一个文件输入框、一个按钮和一个图片展示区域。当用户选择文件后，通过`handleFileChange`方法将选择的文件保存到`file`变量中。当用户点击按钮时，通过`convertToBase64`方法将文件转换为base64编码，并将转换后的结果赋值给`imageUrl`变量，实现图片的展示。

示例二：

// 将图片转为 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);
});

通过以上示例，我们可以看到，在uniapp中，通过Vue.js的双向数据绑定机制和JavaScript的`FileReader`对象，可以很方便地将图片转换为base64编码，并在页面中展示出来。这样，我们就可以使用base64编码的图片来替代原始图片，实现在页面中动态显示和传输图片的目的。

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