vue 图片转base64的两种方法(包括h5+plus调取手机图片)
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=https://www.it610.com/article/''//内容清空
resolve({err:'图片大小必须小于1M！'})
}else if (size <= 0) {
e.target.value=https://www.it610.com/article/''//内容清空
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)//添加到图片数组上进行渲染
})
}
}
以下是全部代码
样式有点普通，请自行设计…
文章图片
ul{
width: 100%;
display: flex;
flex-wrap: wrap;
}
li{
margin-left: 10px;
}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 = https://www.it610.com/article/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才可以使用，普通浏览器无法使用此方法【vue 图片转base64的两种方法(包括h5+plus调取手机图片)】本人写的有问题的希望大家提出，我必定改善
