小程序圖片轉base64

huayeluoliuhen 發布于2019-08-22 18:50 / 2863人閱讀

摘要：引入前段時間有個需求涉及小程序還原當中的圖片上傳功能。利用小程序方法和既然是使用方法，那么首先需要在里添加一個元素如果不加，頁面方法無法生成，也不行部分省略獲取過程操作對應的繪畫圖片，把圖片放進去。

引入

前段時間有個需求涉及小程序還原H5當中的圖片上傳功能。
沒有細節考慮好就跟后端的老哥說接口不用改直接前端處理。。。
現在想想真是心疼我自己

現階段的一些思路。 服務器處理

直接上傳流文件到服務器，然后在服務器做base64轉換處理。

利用小程序canvasGetImageData方法和upng

既然是使用canvas方法，那么首先需要在wxml里添加一個canvas元素

如果不加，頁面canvasGetImageData方法無法生成，display:none也不行

js部分省略獲取imgPath過程

var canvasid="mycanvas"
var ctx = wx.createCanvasContext(canvasid) //操作對應id的canvas

ctx.drawImage(imgPath,0,0,width,height)//繪畫圖片，把圖片放進去。這里的寬高可以使用wx.getImageInfo獲取用戶上傳圖片本來的寬高

ctx.draw(function(){
    wx.canvasGetImageData({
        canvasId:canvasid //參數，canvas標簽的id
        x:0,//起始位置，x坐標
        y:0,
        width:width,
        height:height,
        success:function(res){
            //引入upng，將圖片轉化成utf-8格式
            let pngData = upng.encoded([res.data.buffer].res.width,res.height）//再轉化成base64
            let bs64 = wx.arrayBufferToBase64(pngData)
        }
    })
});

必須引入upng組件

基礎庫必須大于1.9.0

通過小程序request資源請求(暫不可用)

js部分省略獲取imgPath過程

wx.request({
  url:imgPath,
  responseType: "arraybuffer",//最關鍵的參數，設置返回的數據格式為arraybuffer
  success:res=>{
        let base64 = wx.arrayBufferToBase64(res);//把arraybuffer轉成base64
        base64　= "data:image/jpeg;base64," + base64　//不加上這串字符，在頁面無法顯示的哦
        console.log(base64)　//打印出base64字符串，可復制到網頁校驗一下是否是你選擇的原圖片呢
      }
});

基礎庫必須大于1.9.0

總結

使用upng方法確實能解決問題，但是引入upng組件相對有些龐大(只相對于處理base64這個功能)，現階段更加合適的處理方式還是上傳到后端來處理圖片格式。

云服務器 GPU云服務器 base64轉圖像c語言 base64圖片生成 base64 base64數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96267.html

微信小程序集成 Jenkins

摘要：總結本文以微信小程序常規的發布流程為切入點，循序漸進地介紹了如何集成實現微信小程序預覽上傳功能。 showImg(https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins.png); 本文首發于 https://github.com/yingye/Blo... ，歡迎各位關注我的Blog，正文以...

young.li 2019-08-23 11:41 評論0 收藏0
input上傳圖片并壓縮（vue，前端，js）

摘要：大家好，我是云皓，話不多說，直入正題，獲取上傳文件自行獲取，也可通過的組件來獲取，轉化為文件，壓縮，轉換為文件，上傳。大家好，我是云皓，話不多說，直入正題 1，獲取input上傳file文件（自行獲取，也可通過vant的upload組件來獲取）2，轉化為base64文件3，壓縮4，轉換為blob文件5，上傳。下面直接上代碼（本代碼段是用用在vue&vantui 里面，原理都在，可根...

andot 2019-08-26 10:59 評論0 收藏0
圖片上傳預覽轉壓縮并轉base64詳解（dShowImg64.js）

摘要：本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內，可以選擇文件，移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello，大家好，游戲開始了，歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說，先上圖。showImg(https://segmentfault.com/img...

NeverSayNever 2019-08-29 17:00 評論0 收藏0
圖片上傳預覽轉壓縮并轉base64詳解（dShowImg64.js）

摘要：本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內，可以選擇文件，移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello，大家好，游戲開始了，歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說，先上圖。showImg(https://segmentfault.com/img...

wums 2019-08-02 11:46 評論0 收藏0
圖片上傳預覽轉壓縮并轉base64詳解（dShowImg64.js）

摘要：本次的內容是圖片的上傳預覽。待上傳圖像點擊藍色框內，可以選擇文件，移動端選擇拍照或選擇圖片進行上傳。部分請點擊這層就是加號圖像是轉碼后顯示圖像的地方。最后的預覽圖像地址以后會加入更多的小插件。 hello，大家好，游戲開始了，歡迎大家收看這一期的講解。本次的內容是圖片的上傳預覽。最后發源碼鏈接。廢話不多說，先上圖。showImg(https://segmentfault.com/img...

zorro 2019-08-23 12:26 評論0 收藏0