1. 程式人生 > >使用微信的 JS SDK 選取手機照片並進行上傳,Iphone無法顯示縮圖

使用微信的 JS SDK 選取手機照片並進行上傳,Iphone無法顯示縮圖

前言

最近從三月初開始就發現有使用者反應微信瀏覽器選擇圖片顯示不了預覽,仔細查詢發現跟微信最近升級瀏覽器核心有關,發現需要升級weixin js sdk了,並且需要修改一些方法,以及對一些老版本的相容。

weixin選取圖片程式碼(老版本jweixin-1.2.0.js之前的版本)

wx.chooseImage({
  count: 1, 
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function (res) {
    var localId = res.localIds[0
]; $('img.avatar-temp').attr('src', localId); } )};

使用如上程式碼發現圖片在iphone上無法顯示,Android上可以無差別顯示,那肯定是瀏覽器核心的問題了,解決辦法就是升級weixin js sdk嘍,直接升級微信js sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

接下來就是修改選顯示圖片的步驟了

wx.chooseImage({
  count: 1, 
  sizeType: ['original'
, 'compressed'], sourceType: ['album', 'camera'], success: function (res) { var localId = res.localIds[0]; if(window.__wxjs_is_wkwebview){ wx.getLocalImgData({ localId: localId, success: function (res) { var localData = res.localData; localData = localData.replace('jgp'
, 'jpeg'); $('img.avatar-temp').attr('src', localData); }, fail:function(res){ alert(res.errMsg); } }); }else{ $('img.avatar-temp').attr('src', localId); } } )};

使用getLocalImgData方法即可在wkwebview瀏覽器核心也可以正常顯示圖片了。注意記得一定要判斷瀏覽器核心,不然總有一個出問題的,並且在else裡面做你該做的事情,千萬別忘了!!!!

weixin上傳圖片

我選擇直接上傳到微信伺服器上面,然後在利用反回的圖片地址,讓自己伺服器去非同步下載圖片

wx.uploadImage({
    localId: localId,
    isShowProgressTips: 1,
    success: function (res) {
        auth_image.serverId = res.serverId;
    },
    fail: function (res) {
        alert(JSON.stringify(res));
    }
});

相關推薦

使用JS-SDK 選取手機照片進行,Iphone無法顯示

變化:1.2.0以下版本的JSSDK不再支援通過使用chooseImage api返回的localld以如:”img src=wxLocalResource://50877878787878787”的方式預覽圖片。 適配建議:直接將JSSDK升級為1.2.0最新版本即可幫助頁

使用JS SDK 選取手機照片進行,Iphone無法顯示

前言 最近從三月初開始就發現有使用者反應微信瀏覽器選擇圖片顯示不了預覽,仔細查詢發現跟微信最近升級瀏覽器核心有關,發現需要升級weixin js sdk了,並且需要修改一些方法,以及對一些老版本的相容。 weixin選取圖片程式碼(老版本jweixin-

公眾號開發《四》使用JS-SDK實現手機圖片,支援壓縮、預覽。下載圖片到自身伺服器

在這貼上上三篇博文連結,方便大家查閱互相學習: 本次講解微信開發第四篇:呼叫微信JS-SDK實現上傳手機圖片到伺服器,是非常常見的功能。如我們看到的使用者上傳頭像 下面是本次要實現的效果圖,支援預覽,壓縮上傳(自帶,可引數控制) 1.準備工作:工欲善其事,必先利其

公眾號開發的時候,進行多張手機相簿圖片時候只第一張其他圖片沒解決方案

微信端的這個方法在使用的在你進行迴圈呼叫的時候他只接受第一張圖片,其他圖片就沒有了所以解決的方法就是一串串執行而不是並行 wx.uploadImage({ localId: '', // 需要上傳的圖片的本地ID,由chooseImage介面獲得 isSh

js 移動端漂亮input框本地,顯示,點選可以檢視大

//首先根據id得到input框的檔案,判斷大小,如果大於100M就不給上傳,如果不大於就可以上傳 $("input[type='file']").on("change",function(){ var load =$(this).attr("id"); var fileSize

Java開發公眾號系列教程(一):js-sdk手機相簿照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時,遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況,今天筆者結合多多年的開發經驗,把相容IOS的解決方案分享給廣大微信開發者朋友。 一、首先申明一點筆者本案例用的微信JSSDK版本是1.2.0的,官方文件給出的最

JS-SDK多張照片

nonce 驗證配置 客戶 http common .get 步驟 pil 16px 通過JS-SDK進行操作的基本步驟包括:引用微信的JS、配置權限驗證參數及使用的接口、通過ready及error驗證配置及功能接口的使用等。如下以上傳圖片Demo為例進行說 (1)引入JS

Java開發公眾號系列教程(一):js-sdk照片相容IOS和安卓裝置

很多開發者朋友在進行微信公眾號開發時,遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況,今天筆者結合多年的開發經驗,把相容IOS的解決方案分享給廣大微信開發者朋友。 微信最新版本JSSDK文件 地址https://mp.weixin.qq.com/advanced/wiki

使用js-sdk語音將語音下載到伺服器

JSSDK使用步驟 步驟一:繫結域名 先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 備註:登入後可在“開發者中心”檢視對應的介面許可權。 步驟二:引入JS檔案 備註:支援使用 AMD/CMD 標準模組載入方法載入

PHP+TP框架生成使用JS-SDK所需的配置資訊,驗證

我在前幾篇部落格中寫到了獲取呼叫JS-SDK需要使用的access_token,網頁授權獲取使用者基本資訊,獲取JS-SDK使用簽名演算法需要使用的jsapi_ticket,現在我們使用微信JS-SD

JS-SDK怎樣使用

html cli net api entity auth sandbox nature wiki 前兩天要用到微信JS庫的的一句話——wx.closeWindow();可是整個調用過程有點兒淚奔了。。。。 盡管開發人員

JS SDK Demo

index cor play cts location 超過 voice error red 微信JS-SDK 分享到朋友圈 分享給朋友 分享到QQ 拍照或從手機相冊中選圖 識別音頻並返回識別結果 使用微信內置地圖查看位置原文:http://www.cnblogs.com/

關於JS SDK接口wx.previewImage預覽接口的使用

不同 img http 數據 無限 為什麽 gpo tle 對比 然後後之前的項目,突然往微信上遷移了,一些微信的接口沒怎麽用過,比較陌生,這次的功能是想調用微信的接口,實現圖片放大的功能, 就找到官方文檔:http://qydev.weixin.qq.com/wiki/i

js-sdk config:invalid signature

val false php signature .com 如何 demo 錯誤 post 1.下載官方示例代碼 http://demo.open.weixin.qq.com/jssdk/sample.zip 2.綜合到項目中 3.修改jssdk.php中加載同級文件的

公眾平臺開發,模板消息,網頁授權,JS-SDK,二維碼生成(4)

支持 post 網頁 信息 行業 使用步驟 獲取 公眾 符號 微信公眾平臺開發,模板消息,什麽是模板消息,模板消息接口指的是向用戶發送重要的服務通知,只能用於符合場景的要求中去,如信用卡刷卡通知,購物成功通知等等。不支持廣告營銷,打擾用戶的消息,模板消息類有固定的模板,每個

Node.js 獲取JS-SDK CONFIG

背景 前端在呼叫微信提供的分享、拍照、掃一掃等功能時需要到後臺獲取配置,主要是簽名(signature)。Node 開發可以用樸靈大佬的SDK——co-wechat-api。 配置 到微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。前提是該域名的專案目錄下有微信提供的校驗檔案。如

關於JS-SDK 分享介面的兩個報錯記錄

一、前提: 微信測試號,用微信開發者工具測試 二、簡單複述文件: 1、引入JS檔案 在需要呼叫JS介面的頁面引入如下JS檔案,(支援https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js 如需進一步提升服務穩定性,當上述資源不可訪問時,可改訪問:ht

Java開發公眾號系列教程(三):js-sdk多圖片,支援預覽,刪除

用過微信的人都知道,日常發表朋友圈圖文動態時,可以選擇多圖片,圖片右上角有個灰色的刪除圖示,可以對即將要發表的照片資訊進行預覽和刪除。今天筆者通過微信js-sdk介面給大家把這個實現過程分享出來。 一、主體思路 微信js-sdk上傳介面支援單次最多選擇9張圖片,我們要實現的就是跟微

接入【JS-SDK】 坑多多

接入【微信JS-SDK】 用於實現自定義朋友圈分享的標題和圖示。 開始之前需要在公眾平臺進行一些設定: 請求 access_token 的服務ip 要新增進【後臺》基本設定》公眾號開發資訊》IP白名單】 接入JS-SDK的頁面域名要新增進【後臺》公眾號設定》功能

Vue怒踩JS-SDK中配置的坑 - 簽名錯誤

前言 這幾天公司需要做微信端h5專案,需要用到微信掃一掃功能,就需要涉及到配置微信JS-SDK的問題,怎麼配置怎麼生成簽名這邊就不說了官方文件(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)都說的比較詳