国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

小程序中使用wx.previewImage實現(xiàn)圖片預(yù)覽與縮放

這篇具有很好參考價值的文章主要介紹了小程序中使用wx.previewImage實現(xiàn)圖片預(yù)覽與縮放。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

在小程序文檔中我們可以看到wx.previewImage的功能是在新頁面中全屏預(yù)覽圖片,預(yù)覽的過程中用戶可以進行保存圖片、發(fā)送給朋友等操作。但其實還有一個隱藏功能縮放圖片,最小為原比例。話不多說,上代碼:
xml代碼:

<view class="container">
  <image class="img" src="/assets/images/longpress-image-scan/wx-qr-code.jpg" data-src="/assets/images/longpress-image-scan/wx-qr-code.jpg" bind:tap="previewImage" mode="widthFix" />
</view>

src的路徑換成自己的圖片路徑就可以了,可以是像上面一樣的本地圖片路徑,也可以是線上圖片鏈接。
js代碼:

Page({
  /**
   * 預(yù)覽圖片
   * @param {*} e 
   */
  previewImage(e){
    const {src:imgSrc} = e.currentTarget.dataset
    console.log(imgSrc);
    wx.previewImage({
      current: imgSrc,
      urls: [imgSrc],
      success: res => {
        console.log(res);
      },
      fail: err => {
        console.log(err);
      }
    })
  }
})

注意:該功能需在真機上測試,微信開發(fā)者工具中的模擬器看不到效果喲。文章來源地址http://www.zghlxwxcb.cn/news/detail-797727.html

到了這里,關(guān)于小程序中使用wx.previewImage實現(xiàn)圖片預(yù)覽與縮放的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • #Uniapp: uni.previewImage(OBJECT) 預(yù)覽圖片

    uni.previewImage(OBJECT) 預(yù)覽圖片。 api地址 媒體-圖片 示例 OBJECT 參數(shù)說明 參數(shù)名 類型 必填 說明 平臺差異說明 count Number 否 最多可以選擇的圖片張數(shù),默認(rèn)9 見下方說明 sizeType Array 否 original 原圖,compressed 壓縮圖,默認(rèn)二者都有 App、微信小程序、支付寶小程序、百度小程序 e

    2024年01月25日
    瀏覽(22)
  • 使用Vue2開發(fā)一個圖片預(yù)覽組件,支持多圖切換、縮放旋轉(zhuǎn)、鼠標(biāo)滾輪、鍵盤按鍵、拖動等等操作

    使用Vue2開發(fā)一個圖片預(yù)覽組件,支持多圖切換、縮放旋轉(zhuǎn)、鼠標(biāo)滾輪、鍵盤按鍵、拖動等等操作

    話不多說,咱們趕緊來開啟本章的內(nèi)容,這次小編給各位帶來的依舊是實用類文章,分享如何開發(fā)一個完整的 圖片預(yù)覽組件 ,它支持多圖切換、放大縮小、旋轉(zhuǎn)、鼠標(biāo)滾輪操作、鍵盤按鍵控制、拖動等等的功能,并且使用方便、易擴展,零依賴。 項目演示技術(shù)小編采用的是

    2024年02月09日
    瀏覽(131)
  • 微信小程序瀏覽docx,pdf等文件在線預(yù)覽使用wx.openDocument
  • 微信小程序 — 圖片實現(xiàn)縮放,拖拽功能

    movable-view 可移動的視圖容器,在頁面中可以拖拽滑動。 movable-view必須在 movable-area 組件中,并且必須是直接子節(jié)點,否則不能移動。 如果想讓圖片實現(xiàn)縮放,拖拽效果。則可以把圖片放到movable-view容器里面 。 movable-view 可移動的視圖容器,在頁面中可以拖拽滑動。 效果如下

    2024年02月13日
    瀏覽(23)
  • asp微信小程序上傳多張照片功能,wx.chooseMedia和wx.uploadFile配合實現(xiàn)多張圖片上傳

    由于項目需要使用asp,因此用asp寫了一個接收微信小程序上傳多張照片的功能,例用的是wx.chooseMedia和wx.uploadFile配合,循環(huán)上傳多張照片,微信小程序現(xiàn)在好像最多可以上傳20張,閑話不好上代碼,需要的可以直接下載,前后臺都有,本文只放前端代碼: 本文實現(xiàn)微信小程序

    2024年02月11日
    瀏覽(26)
  • VX小程序 實現(xiàn)區(qū)域轉(zhuǎn)圖片預(yù)覽

    VX小程序 實現(xiàn)區(qū)域轉(zhuǎn)圖片預(yù)覽

    圖例 1、安裝插件?wxml2canvas git地址參照:https://github.com/wg-front/wxml2canvas 2、類型 3、數(shù)據(jù)結(jié)構(gòu) 4、頁面引用 1、使用canvas畫圖組件 有坑:uni.getImageInfo 方法轉(zhuǎn)出的地址是http 不是https,而 uni.previewImage 識別 https的,否則圖片會出不來 ? ? ?希望我的愚見能夠幫助你哦~,若有不足

    2024年02月11日
    瀏覽(22)
  • 小程序中使用上傳圖片,顯示、刪除、預(yù)覽

    小程序中使用上傳圖片,顯示、刪除、預(yù)覽

    需要哦用戶點擊加號上傳圖片,并展示所上傳圖片和能夠刪除和預(yù)覽 采用的uniapp,創(chuàng)建了一個view容器包裹加號圖標(biāo)和展示的圖片。 內(nèi)部展示圖片超過9張時候,加號圖片隱藏 點擊加號 uni.showActionSheet(OBJECT) 點擊后又使用看圖片選擇API 從底部向上彈出操作菜單 OBJECT參數(shù)說明

    2024年01月18日
    瀏覽(14)
  • uniapp中使用canvas,在微信小程序中實現(xiàn)圖片縮放移動涂鴉文字

    uniapp中使用canvas,在微信小程序中實現(xiàn)圖片縮放移動涂鴉文字

    最近需要一個功能,在微信中編輯圖片,實現(xiàn)對圖片的涂鴉、加文字、縮放、移動,以下基本能實現(xiàn)該功能。 uniapp中使用畫布,實現(xiàn)圖片的編輯-批量批改圖片 1.初始化畫布圖片,圖片是網(wǎng)絡(luò)圖片,非本地圖片,所以需要先獲取圖片信息,直接使用uni.getImageInfo(如果是本地圖

    2024年04月14日
    瀏覽(123)
  • 微信小程序(二)微信小程序選擇本地圖片顯示并預(yù)覽(實現(xiàn)左右滑動)

    微信小程序(二)微信小程序選擇本地圖片顯示并預(yù)覽(實現(xiàn)左右滑動)

    在微信小程序里面實現(xiàn)選擇圖片然后預(yù)覽是一個非常普遍的功能,在我們上傳圖片文件的時候,都會選擇本地的圖片進行上傳,在上傳之前會查看一下自己上傳的圖片是否準(zhǔn)確。所以要做到預(yù)覽圖片。 下面就實現(xiàn)一個簡單的本地圖片顯示預(yù)覽的功能~~ 1、創(chuàng)建頁面 這里我直接

    2024年02月03日
    瀏覽(94)
  • 前端使用scale屬性結(jié)合CSS動態(tài)樣式實現(xiàn)動態(tài)的圖片縮放效果

    廢話不多說,直接上代碼: 示例一,使用css動態(tài)樣式結(jié)合scale進行src圖片的縮放。 示例二,使用css動態(tài)樣式結(jié)合scale進行background背景圖圖片的縮放。

    2024年01月15日
    瀏覽(26)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包