将小图片转为Base64编码（简单实现！）

最新推荐文章于 2024-10-15 13:15:34 发布

我要疯狂做项目

最新推荐文章于 2024-10-15 13:15:34 发布

阅读量402

点赞数 6

文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_45478649/article/details/136398896

版权

核心代码

function getbase64(url) {
  return new Promise((resolve) => {
    const image = new Image()
    // 先设置图片跨域属性
    image.crossOrigin = 'Anonymous'
    // 再给image赋值src属性，先后顺序不能颠倒
    image.src = url
    image.onload = function () {
      const canvas = document.createElement('CANVAS')
      // 设置canvas宽高等于图片实际宽高
      canvas.width = image.width
      canvas.height = image.height
      canvas.getContext('2d').drawImage(image, 0, 0)
      // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
      const dataURL = canvas.toDataURL('image/jpeg')
      resolve(dataURL)
    }
    image.onerror = () => {
      resolve({ message: '相片处理失败' })
    }
  })
}

使用

<script setup>
import { onMounted, reactive } from 'vue'
// 这里我单独写一个函数返回一个
function getbase64(url) {
  return new Promise((resolve) => {
    const image = new Image()
    // 先设置图片跨域属性
    image.crossOrigin = 'Anonymous'
    // 再给image赋值src属性，先后顺序不能颠倒
    image.src = url
    image.onload = function () {
      const canvas = document.createElement('CANVAS')
      // 设置canvas宽高等于图片实际宽高
      canvas.width = image.width
      canvas.height = image.height
      canvas.getContext('2d').drawImage(image, 0, 0)
      // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
      const dataURL = canvas.toDataURL('image/jpeg')
      resolve(dataURL)
    }
    image.onerror = () => {
      resolve({ message: '相片处理失败' })
    }
  })
}
let imgObj = [
  {
    name: 'zhangsan',
    img:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
  },
  {
    name: 'lisi',
    img: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
  },
  {
    name: 'wangwu',
    img: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  }
]


let newImgObj = reactive([
  {
    name: 'zhangsan',
    img: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
  },
  {
    name: 'lisi',
    img: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
  },
  {
    name: 'wangwu',
    img: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
  }
])
onMounted(async () => {
  newImgObj = Object.assign(newImgObj, await Promise.all(imgObj.map(async (item) => {
    return {
      name: item.name,
      img: await getbase64(item.img)
    }
  })))
  console.log('newImgObj', newImgObj);
})
</script>
<template>
  <div id="app">
      <div v-for="item in newImgObj">
        <h1>{{ item.name }}</h1>
        <img :src="item.img" alt="">
      </div>
  </div>
</template>

<style scoped>
</style>

优缺点

在这里插入图片描述