1. 程式人生 > >微信小程式將圖片資料流新增到image標籤中

微信小程式將圖片資料流新增到image標籤中

有時候我們通過API介面獲取圖片時,拿到的是圖片的資料流:有可能是二進位制資料流,也可能是base64編碼的資料流。

     data: {
       captchaImage: '../../images/captcha.png', // 如果需要的話,可以給張預設的圖片先
     },


  • 當獲取到的是原始的圖片二進位制資料流時,只需要將image標籤的src直接設定為圖片url就可以,如:
     var that = this
     var url = constants.WEB_SERVER_DOMAIN + '/getImage'
     console.log(url)
     that.setData ({
       captchaImage: url,
     })

  • 當獲取到的是圖片的base64編碼的資料流時,需要將介面獲取到的資料再解析base64編碼,如:
      wx.request({
      url: constants.WEB_SERVER_DOMAIN + '/getImage',
      method: 'GET',
      header: {
        'content-type': 'application/octet-stream',
      },
      success: function (res) {
        //console.log(res.data)
        var data = res.data
        console.log(res.statusCode)
        if (res.statusCode == 200) {
          that.setData ({
            captchaImage: 'data:image/png;base64,' + data,  // data 為介面返回的base64字串
          })
        }
      },
注意:上面解析base64時,在資料流前面加上  data:image/png;base64,  (注意是有個“,”) 。image/png改為對應的圖片型別,如 image/gif, image/jpg等。 然後在wxml檔案中,使用image標籤,如:
<image src="{{captchaImage}}" style="width:100px;height:44px;" ></image>



相關推薦

程式圖片資料新增image標籤

有時候我們通過API介面獲取圖片時,拿到的是圖片的資料流:有可能是二進位制資料流,也可能是base64編碼的資料流。 data: { captchaImage: '../../images/captcha.png', // 如果需要的話,可以給張預設

程式 圖片與生成後二維碼合成

wxml <view class="bg"> <canvas canvas-id="shareCanvas" class="canvas"></canvas> <image src="{{img}}" class="img

程式 獲取的使用者資料存資料庫

微信開發端的js檔案: const APP_ID = 'wx0843bxxxxxxxf6fc'; //輸入小程式appid const APP_SECRET = '637e11bf3dxxxxxxxxx9f9b1ef5221'; //輸入小程式app_secret var OPEN_ID =

程式字串生成二維碼圖片

最近接到這樣一個需求,需要在小程式裡將十幾位隨機字串轉換為二維碼的形式展示。公眾號中(另一終端)呼叫JSSDK掃一掃功能,去掃描小程式生成的二維碼。得到字串,然後進行接下來的邏輯處理。 下面記錄的是小程式中生成二維碼圖片這一操作,用的是原文作者改版後的生成

使用Servlet從程式請求的檔案獲取檔案內容和表單資料

說明:專案中用到微信小程式上傳檔案,發現檔案放在流中,Struts中request經過封裝無法獲取到此檔案流,嘗試用servlet解決package com.web; import java.io.File; import java.io.FileOutputStream;

程式,返回資料給上一介面

我們知道微信官方文件中教我們如何把當前介面的資料傳輸到要跳轉的下一介面中,那麼如何在下一介面返回當前介面時把資料返回來呢? 假設上一介面為A,對應的A.js中有一段這樣的程式碼: 頁面({ data:{ 物件:'', } }) 下一介面為B,對應的B.js中有這個方法:

程式分包傳送資料,給硬體完成升級

微信小程式分包傳送資料,給微信硬體完成韌體升級 微信硬體升級流程: 1.準備升級韌體包,我們使用的是zip包,實際使用的時候可以放在伺服器下載。 2.掃描ble裝置並連線,向裝置寫入10,進入dfu模式。 3.進入dfu之後藍芽會斷開,需要重新連結,另外,duf模式下,藍芽的

程式 base64 圖片 canvas 畫布 drawImage 實現

在微信小程式中 canvas drawImage API 傳入的第一個引數是 imageResource 圖片資源路徑,這個引數通常由從相簿選擇圖片 wx.chooseImage 或 wx.getImageInfo 獲取圖片資訊來獲得。 而 base64 格式圖片資料,無法被 getImageIn

Android 分享程式圖片優化

      小菜上週接入了微信分享小程式的入口,基本功能實現都沒問題,有需要的朋友可以瞭解一下 Android 分享微信小程式失敗二三事,雖然功能都正常,但整體測試發現圖片展示效果不佳。於是小菜整理了一個簡單的小方法處理一下圖片!  

網易雲易盾推出面向程式的大資料反作弊產品

近日,國內領先的業務風控服務網易雲易盾對外推出面向微信小程式的大資料反作弊產品,源於網易20年的核心業務風控技術與全面穩健的策略模型,有機整合了裝置指紋、IP畫像、規則引擎等八大能力,可廣泛應用電商營銷、金融支付、生活服務類小程式場景,幫助企業防範微信小程式端的黑灰產作弊侵害。 易盾安全調查顯示,小程式已成

技術白之程式圖片加文字連結

在多彩的圖片呈現下的程式必不可缺的便是文字的搭配,圖片勾起興趣,文字輔助表達,多數情況下我們上傳的圖片都需要在它周圍添上合適的標題,以便美觀和表述清晰。下面是簡單的圖片文字連結的截圖: 說到圖片和文字的連結就不得不理下思路:首先我想要在小程式內顯示圖片文字資訊,且在點選目標圖片或文字時,可

程式Canvs畫資料表格 折線圖

微信小程式Canvs畫資料表格 應設計要求,需要畫個圖示來顯示使用者歷史資料的變化,所以就寫了個方法,方便自己以後用的時候呼叫 廢話不多說,先上效果圖 現在.wxml檔案中加入canvas 標籤 給他一個canvas-id屬性,js中獲取上

程式 Echarts 非同步資料更新

微信小程式 Echarts 非同步資料更新的練習,被坑了很多次,特作記錄。 作者:羅兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0、效果圖 1、檢視 <!--index.wxml--> <view class="

程式實現css 瀑布佈局方法

在微信小程式中經常使用瀑布流來進行頁面的佈局,今天就遇到了這樣的情況,之前是一直用flex佈局來著,但是flex佈局帶來的問題是圖片高度不同那麼進行佈局的時候有些圖片的下面就會留出很多富餘的空間這樣看著就不是很好了,所以在這裡採用瀑布流的方法:Multi-column,廢話少說上程式碼: ind

程式六(資料請求 表單的建立 提交 與接收)

好了 開始正題了,本節小小研究了下 微信小程式的表單建立與提交 先看看效果 1. 表單頁面 <view id="adduser">     <form bindsubmit="formSubmit" bindreset="formReset"> &

程式開發— 圖片顯示錯誤:VM24966:2

VM24966:2 Failed to load image http://1042065718.debug.open.weixin.qq.com/pages/detail/detail/detail : the server responded with a status of 404

程式儲存圖片到相簿功能實現

專案中有個儲存二維碼到相簿的功能,所以涉及到使用者是否授權相簿許可權的問題。廢話不多說,直接上乾貨… 功能邏輯: 先檢查使用者請求過的許可權中是否允許"儲存到相簿"許可權,如果沒有請求過這個許可權,應該向使用者發起授權請求(彈窗授權),如果請求過這個許可權,並且授權了,那就儲存圖片,

程式圖片上傳在java後端接收不到圖片的問題

在使用小程式的圖片上傳時,發現一直接收不到圖片,最後找到問題是Spring-mvc.xml配置檔案對圖片進行了預處理,所以導致沒有接收到。將配置檔案 <bean id="multipartResolver" class="or

程式儲存圖片以及分享給朋友

一、儲存圖片    微信小程式中使用得比較多的就是分享功能,基本上都會用到,尤其是對二維碼圖片,儲存在本地或者將小程式分享給朋友,好在微信小程式提供的api中已經告訴了該怎麼使用,下面就將所用到的分享

程式儲存圖片到本地

轉載:開啟連結 wx.getImageInfo({ src: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png',