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  = ''                //内容清空
            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才可以使用，普通浏览器无法使用此方法

本人写的有问题的希望大家提出，我必定改善