1. 程式人生 > >在微信小程式如何wx.chooseImage的圖片路徑轉成Base64

在微信小程式如何wx.chooseImage的圖片路徑轉成Base64

js檔案:


(function(){ var BASE64_MAPPING=[ 'A','B','C','D','E','F','G','H', 'I','J','K','L','M','N','O','P', 'Q','R','S','T','U','V','W','X', 'Y','Z','a','b','c','d','e','f', 'g','h','i','j','k','l','m','n', 'o','p','q','r','s','t','u','v', 'w','x','y','z','0','1','2','3', '4','5','6','7','8','9','+',
'/' ];
/** *ascii convert to binary */ var _toBinary=function(ascii){ var binary=new Array(); while(ascii>0){ var b= ascii%2; ascii = Math.floor(ascii/2); binary.push(b); } /* var len = binary.length; if(6-len > 0){ for(var i = 6-len ; i > 0 ; --i){ binary.push(0); } }*/ binary.reverse(); return binary
; };
/** *binary convert to decimal */ var _toDecimal=function(binary){ var dec=0; var p=0; for(var i= binary.length-1; i >= 0;--i){ var b= binary[i]; if(b==1){ dec += Math.pow(2, p); } ++p; } return dec; };
/** *unicode convert to utf-8 */ var _toUTF8Binary=function(c, binaryArray){ var mustLen=(8-(
c+1))+((c-1)*6); var fatLen= binaryArray.length; var diff= mustLen- fatLen; while(--diff>=0){ binaryArray.unshift(0); } var binary=[]; var _c= c; while(--_c>=0){ binary.push(1); } binary.push(0); var i=0, len= 8-(c+1); for(; i< len;++i){ binary.push(binaryArray[i]); }
for(var j=0; j< c-1;++j){ binary.push(1); binary.push(0); var sum=6; while(--sum>=0){ binary.push(binaryArray[i++]); } } return binary; };
var __BASE64={ /** *BASE64 Encode */ encoder:function(str){ var base64_Index=[]; var binaryArray=[]; for(var i=0, len= str.length; i< len ;++i){ var unicode= str.charCodeAt(i); var _tmpBinary= _toBinary(unicode); if(unicode<0x80){ var _tmpdiff=8- _tmpBinary.length; while(--_tmpdiff>=0){ _tmpBinary.unshift(0); } binaryArray = binaryArray.concat(_tmpBinary); }elseif(unicode>=0x80&& unicode<= 0x7FF){ binaryArray = binaryArray.concat(_toUTF8Binary(2, _tmpBinary)); }elseif(unicode>=0x800&& unicode<= 0xFFFF){//UTF-8 3byte binaryArray = binaryArray.concat(_toUTF8Binary(3, _tmpBinary)); }elseif(unicode>=0x10000&& unicode<= 0x1FFFFF){//UTF-8 4byte binaryArray = binaryArray.concat(_toUTF8Binary(4, _tmpBinary)); }elseif(unicode>=0x200000&& unicode<= 0x3FFFFFF){//UTF-8 5byte binaryArray = binaryArray.concat(_toUTF8Binary(5, _tmpBinary)); }elseif(unicode>=4000000&& unicode<= 0x7FFFFFFF){//UTF-8 6byte binaryArray = binaryArray.concat(_toUTF8Binary(6, _tmpBinary)); } }
var extra_Zero_Count=0; for(var i=0, len= binaryArray.length; i< len ; i+=6){ var diff=(i+6)-len; if(diff==2){ extra_Zero_Count =2; }elseif(diff==4){ extra_Zero_Count =4; } //if(extra_Zero_Count > 0){ // len += extra_Zero_Count+1; //} var _tmpExtra_Zero_Count= extra_Zero_Count; while(--_tmpExtra_Zero_Count>=0){ binaryArray.push(0); } base64_Index.push(_toDecimal(binaryArray.slice(i, i+6))); }
var base64=''; for(var i=0, len= base64_Index.length; i< len ;++i){ base64 += BASE64_MAPPING[base64_Index[i]]; }
for(var i=0, len= extra_Zero_Count/2; i < len ;++i){ base64 +='='; } return base64; }, /** *BASE64 Decode for UTF-8 */ decoder :function(_base64Str){ var _len= _base64Str.length; var extra_Zero_Count=0; /** * 計算在進行Base64編碼的時候補了幾個0 */ if(_base64Str.charAt(_len-1)=='='){ //alert(_base64Str.charAt(_len-1)); //alert(_base64Str.charAt(_len-2)); if(_base64Str.charAt(_len-2)=='='){//兩個等號說明補了4個0 extra_Zero_Count =4; _base64Str = _base64Str.substring(0, _len-2); }else{//一個等號說明補了2個0 extra_Zero_Count =2; _base64Str = _base64Str.substring(0, _len - 1); } }
var binaryArray=[]; for(var i=0, len= _base64Str.length; i< len ; ++i){ var c= _base64Str.charAt(i); for(var j=0, size= BASE64_MAPPING.length; j< size ;++j){ if(c== BASE64_MAPPING[j]){ var _tmp= _toBinary(j); //不足六位的補0 var _tmpLen= _tmp.length; if(6-_tmpLen>0){ for(var k=6-_tmpLen; k> 0;--k){ _tmp.unshift(0); } } binaryArray = binaryArray.concat(_tmp); break; } } }
if(extra_Zero_Count>0){ binaryArray = binaryArray.slice(0, binaryArray.length- extra_Zero_Count); }
var unicode=[]; var unicodeBinary=[]; for(var i=0, len= binaryArray.length; i< len ;){ if(binaryArray[i]==0){ unicode=unicode.concat(_toDecimal(binaryArray.slice(i,i+8))); i +=8; }else{ var sum=0; while(i< len){ if(binaryArray[i]==1){ ++sum; }else{ break; } ++i; } unicodeBinary = unicodeBinary.concat(binaryArray.slice(i+1, i+8-sum)); i +=8- sum; while(sum>1){ unicodeBinary = unicodeBinary.concat(binaryArray.slice(i+2, i+8)); i +=8; --sum; } unicode = unicode.concat(_toDecimal(unicodeBinary)); unicodeBinary =[]; } } return unicode; } };
//window.BASE64 = __BASE64; module.exports={ CusBASE64: __BASE64 } })();

程式引入:

var Base64 =require("../../../utils/base64.js");

轉成Base64:

wx.chooseImage( { success:function(res){ var path= res.tempFilePaths[0]; var Path= Base64.CusBASE64.encoder(path); Meths.Console("本地圖片路徑base6458:", Path); })  

列印結果:

本地圖片路徑base6458:
aHR0cDovL3RtcC93eDY3ODlmNDU0NzRkMzlkYjQubzZ6QUpzMUZWUDVrSlVJRUJZWHUyZm5LVGlXNC4yYjA0ZGYzZWNjMWQ5NGFmZGRmZjA4MmQxMzljNmYxNS5qcGc=

相關推薦

程式如何wx.chooseImage圖片路徑Base64

js檔案: (function(){ var BASE64_MAPPING=[ 'A','B','C','D','E','F','G','H', 'I','J','K','L','M','N','O','P', 'Q','R','S','T','U','V','W','

程式上傳圖片wx.chooseImagewx.uploadFile

wxml: <view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap

程式wx.getImageInfo()獲取圖片資訊

一.知識點 二.列子 (1).載入時 <view class="zn-uploadimg"> <image src="{{tempFilePaths}}" mode="as

程式上傳圖片到伺服器wx.uploadFile

專案中肯定會遇到上傳檔案到伺服器端,小程式提供了很有用的api wxml程式碼: <image mode='widthFix' src="{{imgUrl}}"></image> <view bindtap="getPhoto">上傳圖片</vie

程式wx.previewImage預覽圖片

一.小知識 二.例子 1.wxml <view class="container"> <view wx:for="{{imgalist}}" wx:for-item="imag

坑:程式wx.request和wx.uploadFile中傳引數的區別

微信小程式中通過元件<form>提交表單的時候,在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求,提交表單資料,通過引數data傳資料, wx.request({ url: 'test.php', //僅為示例,

程式wx.request踩坑記錄

一:header['content-type'] 為 application/json 的資料 前端 wx.request({ url: apiUrl, //替換成自己的伺服器地址 data: {

程式點選圖片放大預覽

微信小程式點選圖片放大預覽使用到 wx.previewImage 介面,可以放大、上/下一張 上程式碼 wxml程式碼 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{i

程式上傳圖片,視訊及預覽

wxml <!-- 圖片預覽 --> <view class='preview-warp' wx:if="{{urls}}"> <image src='{{urls}}' /> </view> <view class="prew_video"

程式 wx.request wepy 簡單封裝

本文出自: http://blog.csdn.net/wyk304443164 很簡單 import sha1 from './sha1' // sign // 簽名 function sign (signObj = {}) { ... // 自行加密

程式 上傳圖片至阿里雲OSS(支援多圖片上傳)

我們先講下為什麼要把圖片檔案上傳到雲伺服器呢, 有什麼好處呢? 1、能減輕我們自己伺服器的頻寬 如果一個程式裡有多處地方用到使用者上傳圖片等功能的話,建議還是放到阿里雲或者千牛雲等其他平臺上來儲存我們的圖片,可以給公司的伺服器減少很多壓力,磁碟儲存也就不會太大 2、提升使用者體驗感

程式wx.redirectTo、wx.navigateTo跳失敗

在開發小程式時,用到下面三種頁面跳轉方法,路徑寫對後跳轉沒有反應,也沒報錯。 wx.navigateTo(OBJECT) 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。 wx.redirectTo(OBJECT) 關閉當前頁面,跳轉

程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子

微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子 解決方案 有種場景:頁面 A => B => C => D, 當在 C 頁面呼叫 wx.reLaunch({url:’/pages/D’}) 時,頁面 A 、B、C 的 onUnloa

程式--多張圖片下載問題--for迴圈出現 漏下,亂序。最多下載5張圖片的問題解決(附帶個人開發程式原始碼)

微信小程式多圖下載,之前肯定對單張圖片下載瞭解了。這裡就不再多說。 首先,多圖下載肯定是用到迴圈了。那麼問題就出在迴圈這裡。在迴圈裡呼叫單圖下載方法。這樣就會出現一個問題,就是下載時先遍歷完了,然後再依次執行wx.downloadfile 獲取到下載的臨時檔案路徑,再使用wx.saveIma

程式使用本地圖片在真機不顯示的問題

最近做的小程式,在真機測試發現有些本地圖片在開發工具上可以顯示,但是在真機上預覽的時候不能顯示 程式碼是這樣寫的 <view class='seat-size' wx:for="{{item}}" wx:key="index" wx:for-index="index" wx:f

程式上傳圖片到7牛雲

封裝上傳的方法 uploadQiniu(a, b) { //上傳圖片的方法 let token = a; //後臺請求回來的token let tempFilePaths = b; // 圖片路徑 var that = this; wx.uploadFile({ url: 'h

程式——Feed流圖片佈局解決方案

三種Feed流中的圖片佈局:宮格式佈局、拼圖式佈局、瀑布流式佈局。 一、宮格式佈局 宮格式佈局也就是九宮格佈局,多用在社交類的APP中,九宮格圖片不僅能放進去很多內容,同時也能很好地引起網友的關注。          從上面

程式wx:for和wx:for-item的區別

wx:for="{{list}}"用來迴圈陣列,而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的 如果是一維陣列,按照如下方式迴圈出來:   1 2 3 <view wx

程式顯示背景圖片

我們可能總遇到這種情況,當我們引入本地的圖片作為背景圖片時(background-image)圖片並未顯示,引入的相對路徑都是對的,導致這個現象的原因就是小程式的wxss中使用background-image時不支援顯示本地圖片,只支援顯示線上圖片和base64格式的圖片,我們要轉化為bas