Base64转图片和图片转Base64

爱被打了一巴掌 2023-01-13 09:37 321阅读 0赞

<template>
         <view>
             <view  class="imgtext">
                 <image :src="imgusr" mode=""></image>
             </view>
             <view class="btn">
               <button @click="uploadimg"  style="background-color: #8A6DE9;" type="default">上传图片</button>
             </view>
             <view  class="btn">
               <button @click="pathTobase64img"  style="background-color: #DD524D;" type="default">转换为base64路径</button>
             </view>
              <view class="btn">
                 <button  @click="base64Topathimg" style="background-color: #09BB07;" type="default">由base64转换为phth路径</button>
              </view>
             <view  class="imgphth">
               <textarea :value="imgPth" disabled    placeholder="" />
                
             </view>
            
         </view>
    </template>
    
    <script>
         import {  pathToBase64, base64ToPath } from '@/common/index.js'
         
        export  default{ 
          
          data(){ 
             return{ 
                imgusr:"",
                imgPth:"",
                content:""
             } 
          },
          onLoad() { 
            
            
         var   base64='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAqNJREFUaN7tWMtu1DAULeL1B2XBCgRL3j8APwBLxIblsCqbfkAH/qAJsROGne2CsuiyXY5gTVsJluUfAIlHRRkN9ySdiTMMtZ3JJIzqK1mKZnJ9z/E9vnbu0pI3b968Lbxxnl4MIvV4PRJd0wi5WsO78PkvwK/H6kHAxE8CN3Qb8kfIxP12wTN1h4AcuoMfkzh8kYjbrYBPkvdng0h+GIE5eu5aDSY+6n5pmp5rnEDA5DNtNb8xpi7b+uJd+BT+6nmz4OM3N0j3v8YAmFxxl59c0aUU8Ne3agfa7/fPQKOk9Y4ugSAS+2 ';
         
        var   url='MJMPluOByecp0bPgT8bTGP+FSWGcWkPQYMlcAztnGdAuyZKkkcq6tVFyh6lV4h4N8NMfaAxRk8rfLBcRPT5vtK2r03a5ZDLu7mcx0XSxxYk0DKJlb+M1WNpHQQxeIR55vL9R2Em8uYE3NrlSrJYmuZsJJTXtsL8GEvveQKqNfbuBBG8mHA5SoGnvGbc3YodokEYbMh0CkcROJUnaiSULq3yXcwRQoD/Be9VDfdqlWWiVxKXDwxO+QpHAXt2oNXT6ki/TadvngH71oTcMVThQAA/QUykjvZ6tHA8yQ5WxJzJ5DJRgOHq8G0QymXl3b1yDJhPrzmTyDXfAF+a+v8P9+l/8r3J7HdKgFUltGGtV3RiYwNTNVprgRQHrXV37He8NgfR36YozUCqPFVSm65NMpVT+DESmjhN/HCl9FZDzKbe5G/SpyIy5zLddr1471RAnV/0LRGoNbunzOBGb7I5tO+LE5tYDM6ZH2gYsN9cem41W2IDQwjPFZ91DRNTwdM7Ook9K5EYwPlVwMPTMBm1w1I5DVTX6jJASzA5NbSAAktE62BJwzO4HU5TeuNNiMh1UFsa9l48+bNm7cq9gfmr6wmxprr4wAAAABJRU5ErkJggg==';
          	 
             base64+=url;
              
             
          		//item为base64码
          		 
              base64ToPath(base64)
                .then(path => { 
                  this.imgusr=path;
                   this.imgPth=path;
                  console.log(path);
                })
                .catch(error => { 
                  console.error(error)
                })
        var   path=this.imgusr;
        console.log(path);
                pathToBase64(path)
                  .then(base64 => { 
                    
                    console.log(base64)
                  })
                  .catch(error => { 
                    console.error(error)
                  })
    
          },
          methods:{ 
            uploadimg(){ //上传图片
              uni.chooseImage({ 
                count:1,
                success: (data) => { 
                  console.log(data.tempFilePaths[0]);
                  this.imgPth=data.tempFilePaths[0];
                  this.imgusr=data.tempFilePaths[0];
                }
              })
            },
            pathTobase64img(){ //转换图片路径
              
              pathToBase64(this.imgusr)
                .then(base64 => { 
                  this.imgPth=base64;
                  console.log(base64)
                })
                .catch(error => { 
                  console.error(error)
                })
              
              
            },
            base64Topathimg(){ 
              
              pathToBase64(this.imgusr)
                .then(base64 => {  
                  base64ToPath(base64)
                    .then(path => { 
                       this.imgPth=path;
                      console.log(path);
                    })
                    .catch(error => { 
                      console.error(error)
                    })
                })
                .catch(error => { 
                  console.error(error)
                })
              
               
            }
            
            
          }
          
        }
        
        
       						 
    </script>
    
    <style>
      .base64Topath{ 
        width: 50px;
        height: 50px;
        background-size: 100%,100%;
      }
      .btn{ 
        display: flex;
      }
      .btn  button{ 
        width: 200px;
        height: 40px;
        font-size: 10px;
        line-height: 40px;
        margin-left: 10px;
        margin: auto;
        margin-top: 20px;
      }
      .imgtext{ 
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: auto;
      }
      .imgtext  image{ 
        width: 200px;
        height: 200px;
         background-size: 100%,100%;
        
      }
      .imgphth{ 
         color: #000000;
         font-family: '微软雅黑';
         font-size: 15px;
         font-weight: 500;
          margin: auto; 
          margin-top: 20px;
          display: flex;
          flex-direction: row;
          justify-content: center;
      }
      .imgphth  textarea{ 
        display: inline-block;
        width: 90%;
        height: 300px;
        padding: 10px;
      }
    </style>

效果图如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]

js:

[https://download.csdn.net/download/weixin\_45932157/16729687][https_download.csdn.net_download_weixin_45932157_16729687]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/05ebf13eb02c40439ce974f5764a6190.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70 1]: /images/20221022/8d81a6f1f6a641d6bec97c21ef23b502.png
[https_download.csdn.net_download_weixin_45932157_16729687]: https://download.csdn.net/download/weixin_45932157/16729687