flutter web 二維碼圖片長(zhǎng)按無(wú)法識(shí)別問(wèn)題

問(wèn)題描述:

flutter web 中使用Image控件加載二維碼圖片,在微信中打開(kāi)包含二維碼的頁(yè)面萍虽,長(zhǎng)按二維碼圖片,微信無(wú)法識(shí)別圖片中包含的二維碼

問(wèn)題頁(yè)面

示例代碼:

class QRCodePageextends StatefulWidget {

@override

? _QRCodePageStatecreateState() =>_QRCodePageState();

}

class _QRCodePageStateextends State {

@override

Widgetbuild(BuildContext context) {

return Center(child:Image.asset("res/img/testqcode.png"),);}

}

問(wèn)題分析:

1.首先了解下微信識(shí)別二維碼的原理機(jī)制:

? ?“微信識(shí)別二維碼采用的邏輯是截屏識(shí)別,當(dāng)客戶端發(fā)現(xiàn)用戶在網(wǎng)頁(yè)的img標(biāo)簽內(nèi)進(jìn)行長(zhǎng)按操作時(shí)届榄,會(huì)立刻截屏并且啟動(dòng)二維碼識(shí)別算法。所以這里用于二維碼識(shí)別的圖片是截屏倔喂,而不是之前有人提到的img標(biāo)簽中的圖片铝条。

? ?為什么要用截屏,客戶端截屏?xí)r候席噩,可以不用考慮網(wǎng)絡(luò)傳輸?shù)纫蛩匕噻郑羁斓牡玫阶R(shí)別結(jié)果,否則就需要走一次圖片下載的邏輯悼枢,用戶長(zhǎng)按后等待的時(shí)間會(huì)加長(zhǎng)埠忘,體驗(yàn)上也失去了快感。

2.通過(guò)了解微信識(shí)別二維碼的關(guān)鍵在img標(biāo)簽,我們看下flutter web 頁(yè)面運(yùn)行起來(lái)后是否包含img標(biāo)簽

我們使用Chrome 打開(kāi)web頁(yè)面莹妒,打開(kāi)頁(yè)面檢測(cè)名船,使用控件選取工具,點(diǎn)擊頁(yè)面中的二維碼圖片动羽,查看標(biāo)簽信息.

如下圖所示:


問(wèn)題頁(yè)面內(nèi)容

從上面標(biāo)注的內(nèi)容包帚,可以看到頁(yè)面控件中沒(méi)有包含img控件,到這里我們的問(wèn)題就已經(jīng)很明確了运吓,問(wèn)題就是flutter 的image 控件渴邦,在dart2js轉(zhuǎn)換后不會(huì)生成img控件。

解決方案:

通過(guò)上面的分析得知拘哨,該問(wèn)題產(chǎn)生的原因是缺失img標(biāo)簽谋梭,我們需要在把圖片放置在img標(biāo)簽中,由于dart2js 無(wú)法將image控件或其它控件轉(zhuǎn)換成img標(biāo)簽倦青,所以我們需要通過(guò)html的方式添加img控件瓮床,這里需要用到HtmlElementView控件。

HtmlElementView是Flutter為我們提供了一個(gè)專門用于web的控件产镐,用于加載html 字符串隘庄、html鏈接、iframe等

1.生成圖層唯一標(biāo)識(shí)癣亚,HtmlElementView載入的每一個(gè)圖層都需要有不同的唯一標(biāo)識(shí)丑掺,如果兩次加載的圖層唯一標(biāo)識(shí)相同,控件無(wú)法正常渲染述雾。

String _divId =DateTime.now().toIso8601String();

2.創(chuàng)建并注冊(cè)html控件街州,添加img控件

initQRCode(String _divId,String imagePath,double width,double height) {

ui.platformViewRegistry.registerViewFactory(_divId, (int viewId) {

/// 二維碼圖片控件

? ImageElement imageElement =new ImageElement();

? imageElement.src = imagePath;

? imageElement.width = width.toInt();

? imageElement.height = height.toInt();

? return imageElement;

});

}

注意:當(dāng)直接使用ui.platformViewRegistry.registerViewFactory時(shí)會(huì)提示無(wú)法找到該方法,解決方案看這里:http://www.reibang.com/p/76ec2254c3af

3.使用HtmlElementView控件加載注冊(cè)的html控件

class _QRCodeWidgetStateextends State?{

/// 視圖Id

? String_divId;

? @override

? Widgetbuild(BuildContext context) {

_divId =DateTime.now().toIso8601String();

? ? initQRCode(_divId, widget.imagePath, widget.width, widget.height);

? ? return HtmlElementView(viewType:_divId);

? }

@override

? void initState() {

super.initState();

? }

@override

? void dispose() {

super.dispose();

? }

}

4.使用第二部中的方法查看是否包含img標(biāo)簽玻孟。


添加Html控件頁(yè)面內(nèi)容

? ? ? 從截圖中我們可以看到唆缴,頁(yè)面中已經(jīng)包含img控件了,到這一步大家都認(rèn)為黍翎,有了img標(biāo)簽微信終于能識(shí)別圖片找那個(gè)的二維碼了面徽,但是經(jīng)過(guò)驗(yàn)證,發(fā)現(xiàn)微信雖然能識(shí)別頁(yè)面包含圖片玩敏,但是長(zhǎng)按圖片仍然無(wú)法識(shí)別圖片中包含的二維碼斗忌。因?yàn)閒lutter web 頁(yè)面默認(rèn)是支持縮放的,微信在截圖的時(shí)候并不一定能截取到完整的二維碼圖片旺聚,解決方案如下:

?在index.html中設(shè)置:初始縮放為1织阳,最大縮放值要大于1,不支持縮放砰粹。如下:

? ?<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>


識(shí)別成功
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末唧躲,一起剝皮案震驚了整個(gè)濱河市造挽,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌弄痹,老刑警劉巖饭入,帶你破解...
    沈念sama閱讀 222,252評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異肛真,居然都是意外死亡谐丢,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,886評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蚓让,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)乾忱,“玉大人,你說(shuō)我怎么就攤上這事历极≌粒” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,814評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵趟卸,是天一觀的道長(zhǎng)蹄葱。 經(jīng)常有香客問(wèn)我,道長(zhǎng)锄列,這世上最難降的妖魔是什么图云? 我笑而不...
    開(kāi)封第一講書人閱讀 59,869評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮邻邮,結(jié)果婚禮上琼稻,老公的妹妹穿的比我還像新娘。我一直安慰自己饶囚,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,888評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布鸠补。 她就那樣靜靜地躺著萝风,像睡著了一般。 火紅的嫁衣襯著肌膚如雪紫岩。 梳的紋絲不亂的頭發(fā)上规惰,一...
    開(kāi)封第一講書人閱讀 52,475評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音泉蝌,去河邊找鬼歇万。 笑死,一個(gè)胖子當(dāng)著我的面吹牛勋陪,可吹牛的內(nèi)容都是我干的贪磺。 我是一名探鬼主播,決...
    沈念sama閱讀 41,010評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼诅愚,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼寒锚!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,924評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤刹前,失蹤者是張志新(化名)和其女友劉穎泳赋,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體喇喉,經(jīng)...
    沈念sama閱讀 46,469評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡祖今,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,552評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了拣技。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片千诬。...
    茶點(diǎn)故事閱讀 40,680評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖过咬,靈堂內(nèi)的尸體忽然破棺而出大渤,到底是詐尸還是另有隱情,我是刑警寧澤掸绞,帶...
    沈念sama閱讀 36,362評(píng)論 5 351
  • 正文 年R本政府宣布泵三,位于F島的核電站,受9級(jí)特大地震影響衔掸,放射性物質(zhì)發(fā)生泄漏烫幕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,037評(píng)論 3 335
  • 文/蒙蒙 一敞映、第九天 我趴在偏房一處隱蔽的房頂上張望较曼。 院中可真熱鬧,春花似錦振愿、人聲如沸捷犹。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,519評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)萍歉。三九已至,卻和暖如春档桃,著一層夾襖步出監(jiān)牢的瞬間枪孩,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,621評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工藻肄, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蔑舞,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,099評(píng)論 3 378
  • 正文 我出身青樓嘹屯,卻偏偏與公主長(zhǎng)得像攻询,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子抚垄,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,691評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容