成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

小程序圖片轉(zhuǎn)base64

huayeluoliuhen / 2873人閱讀

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

引入 
前段時間有個需求涉及小程序還原H5當(dāng)中的圖片上傳功能。
沒有細(xì)節(jié)考慮好就跟后端的老哥說接口不用改直接前端處理。。。
現(xiàn)在想想真是心疼我自己
現(xiàn)階段的一些思路。 服務(wù)器處理 
直接上傳流文件到服務(wù)器，然后在服務(wù)器做base64轉(zhuǎn)換處理。
利用小程序canvasGetImageData方法和upng

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

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

js部分省略獲取imgPath過程

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

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

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

必須引入upng組件

基礎(chǔ)庫必須大于1.9.0

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

js部分省略獲取imgPath過程

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

基礎(chǔ)庫必須大于1.9.0

總結(jié)

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96267.html

相關(guān)文章

  • 微信小程序集成 Jenkins

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

    young.li 評論0 收藏0

  • input上傳圖片并壓縮（vue，前端，js）

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

    andot 評論0 收藏0

  • 圖片上傳預(yù)覽轉(zhuǎn)壓縮并轉(zhuǎn)base64詳解（dShowImg64.js）

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

    NeverSayNever 評論0 收藏0

  • 圖片上傳預(yù)覽轉(zhuǎn)壓縮并轉(zhuǎn)base64詳解（dShowImg64.js）

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

    wums 評論0 收藏0

  • 圖片上傳預(yù)覽轉(zhuǎn)壓縮并轉(zhuǎn)base64詳解（dShowImg64.js）

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

    zorro 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<