<template>
<div id="app">
<img id="imgbase64" :src="srcUrl" alt="" style="width: 280px;height:175px;">
</div>
</template>
<script>
export default {
name: 'App',
data() {
return{
srcUrl: ''
}
},
mounted() {
var image = new Image();
image.src = require("./assets/empty.png");
image.onload = ()=>{
this.srcUrl = this.getBase64Image(image);
console.log(this.srcUrl);
}
},
methods: {
getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
}
}
</script>
<style>
</style>
图片转base64格式方法记录
于 2024-01-04 18:05:08 首次发布