vue 图片转base64的两种方法(包括h5+plus调取手机图片)
vue 图片转base64的两种方法(包括h5+plus调取手机图片)1.获取图片文件对象进行转换(主要是对PC端的)在main.js文件下添加全局方法Vue.prototype.$base64Img = (e)=>{return new Promise(function(resolve, reject) {//使用Promise进行异步处理le...
·
vue 图片转base64的两种方法(包括h5+plus调取手机图片)
1.获取图片文件对象进行转换(主要是对PC端的)
在main.js文件下添加全局方法
Vue.prototype.$base64Img = (e)=>{
return new Promise(function(resolve, reject) { //使用Promise进行异步处理
let fileSize = 0;
let fileMaxSize = 1024; //设置图片最大为 1M
fileSize = e.target.files[0].size; //获取图片大小
let size = fileSize / 1024;
let file = e.target.files[0]; //获取图片文件对象
let reader = new FileReader(); //实例化一个对象
if (size > fileMaxSize) {
e.target.value = '' //内容清空
resolve({err:'图片大小必须小于1M!'})
}else if (size <= 0) {
e.target.value = '' //内容清空
resolve({err:'图片大小大小不能为0M!'})
}else{
reader.readAsDataURL(file); //把图片文件对象转换base64
reader.onload = function(e) {
resolve(e.target.result) //回到函数返回base64值
}
}
})
}
通过在组件中调用方法
methods:{
handleFile(e){ //通过input标签选择文件传入e
this.$base64Img(e).then((res)=>{ //调用全局方法
console.log(res) //控制台打印出图片base64值
this.imgs.push(res) //添加到图片数组上进行渲染
})
}
}
以下是全部代码
样式有点普通,请自行设计…
<template>
<div>
<ul>
<li v-for="(list,index) in imgs">
<!--图片src写入base64值可以直接渲染图片 -->
<img :src="list" alt="" width="200" >
</li>
</ul>
<!-- PC端点击打开文件选择图片 -->
<input type="file" accept="image/*" @change="handleFile"/>
</div>
</template>
<script>
export default {
data () {
return {
imgs: [] //创建图片数组
}
},
methods:{
handleFile(e){
this.$base64Img(e).then((res)=>{ //调用全局方法
console.log(res)
this.imgs.push(res) //添加到图片数组上进行渲染
})
}
}
}
</script>
<style scoped>
ul{
width: 100%;
display: flex; flex-wrap: wrap;
}
li{
margin-left: 10px;
}
</style>
2.获取图片路径进行转换base64(PC端与移动端都可以用)
获取图片路径我主要是在使用h5app时调取手机相册进行图片选择时返回的是图片路径,当然第一个方法也是可以在h5app上使用,但我感觉不太美观所有就没用。
以下是代码,同样配置全局方法
Vue.prototype.$base64Img = (path) => { //图片转换base64 , 异步处理
function getBase64Image(img) { //转码格式方法
var canvas = document.createElement("canvas"); // 创建一个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); // 得到base64 编码的 dataURL
return dataURL;
}
return new Promise(function(resolve, reject) { //使用Promise进行异步处理
let image = new Image();
//解决图片跨域问题
image.crossOrigin = '';
//获取传入的图片路径
image.src = path;
//图片加载完后的回调函数,调用转码函数
image.onload = function(){
resolve(getBase64Image(image)) //回调函数返回base64值
}
})
}
在PC端使用方法跟第一个方法一样,只是第二方法传入的路径与第一个传入的值不一样,所有不能直接使用input打开文件传入图片,怎么获取图片路径自行百度…
下面我将使用h5+plus方法进行使用,可以参考HTML5+规范
//绑定点击事件来触发此方法
filmImg(){
let that = this
plus.gallery.pick( function(path){ //调用h5+plus方法打开手机相册选择图片
console.log(path); //确认后返回图片路径
that.$base64Img(path).then((res)=>{ //移动端图片base64封装方法
console.log(res) //控制台打印出图片base64值
//获取到base64所执行的方法...,自行设置
})
},function ( e ) {
console.log( "取消选择图片" );
},{filter:"image",multiple:true,maximum:1,system:false} );// 最多选择1张图片
}
h5+plus 方法只有利用 HbuildX 进行手机调试或者打包成app才可以使用,普通浏览器无法使用此方法
本人写的有问题的希望大家提出,我必定改善
更多推荐
已为社区贡献1条内容
所有评论(0)