![cover](https://img-blog.csdnimg.cn/6f7c97d5a34941b392cdb394e2cd59ba.jpeg)
vue将项目中的图片转成base64字符串
然后在src目录下的assets文件夹中有一个logo.png如果没有你就找一找图片放这里就好了。可能有人会想说那如果我只是想转base64不想让用户看到呢?控制台就把我们img标签上的图片生成了一个base64的加密字符串。然后来到App.vue编写代码如下。我们把这个字符串复制到浏览器地址上去看。我们先来创建一个vue项目。这还不简单隐藏了呗。当我们点击 截取图片。
·
我们先来创建一个vue项目
然后在src目录下的assets文件夹中有一个logo.png 如果没有 你就找一找图片放这里就好了
然后来到App.vue 编写代码如下
<template>
<div id="app">
<button @click = "imageUrlToBase64()">截取图片</button>
<img ref = "image" src = "@/assets/logo.png"/>
</div>
</template>
<script>
export default {
methods:{
imageUrlToBase64() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 48;
canvas.height = 48;
ctx.drawImage(this.$refs.image, 0, 0, 48, 48);
let image = new Image();
//require
image.src = canvas.toDataURL('image/png', 1)
console.log(image.src);
},
},
};
</script>
<style lang="scss" scoped>
#app{
margin: 0;
padding: 0;
}
</style>
然后我们运行项目
当我们点击 截取图片
控制台就把我们img标签上的图片生成了一个base64的加密字符串
我们把这个字符串复制到浏览器地址上去看
没有任何的问题
可能有人会想说 那如果我只是想转base64 不想让用户看到呢?
这还不简单 隐藏了呗
<img ref = "image" style = "display:none" src = "@/assets/logo.png"/>
更多推荐
所有评论(0)