问题描述：
flutter web 中使用Image控件加载二维码图片，在微信中打开包含二维码的页面，长按二维码图片，微信无法识别图片中包含的二维码
问题页面
示例代码：
class QRCodePageextends StatefulWidget {
@override
_QRCodePageStatecreateState() =>_QRCodePageState();
}
class _QRCodePageStateextends State {
@override
Widgetbuild(BuildContext context) {
return Center(child:Image.asset("res/img/testqcode.png"),);}
}
问题分析：
1.首先了解下微信识别二维码的原理机制：
“微信识别二维码采用的逻辑是截屏识别，当客户端发现用户在网页的img标签内进行长按操作时，会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏，而不是之前有人提到的img标签中的图片。
为什么要用截屏，客户端截屏时候，可以不用考虑网络传输等因素，最快的得到识别结果，否则就需要走一次图片下载的逻辑，用户长按后等待的时间会加长，体验上也失去了快感。
2.通过了解微信识别二维码的关键在img标签，我们看下flutter web 页面运行起来后是否包含img标签
我们使用Chrome 打开web页面，打开页面检测，使用控件选取工具，点击页面中的二维码图片，查看标签信息.
如下图所示：
问题页面内容
从上面标注的内容，可以看到页面控件中没有包含img控件，到这里我们的问题就已经很明确了，问题就是flutter 的image 控件，在dart2js转换后不会生成img控件。
解决方案：
通过上面的分析得知，该问题产生的原因是缺失img标签，我们需要在把图片放置在img标签中，由于dart2js 无法将image控件或其它控件转换成img标签，所以我们需要通过html的方式添加img控件，这里需要用到HtmlElementView控件。
HtmlElementView是Flutter为我们提供了一个专门用于web的控件，用于加载html 字符串、html链接、iframe等
1.生成图层唯一标识，HtmlElementView载入的每一个图层都需要有不同的唯一标识，如果两次加载的图层唯一标识相同，控件无法正常渲染。
String _divId =DateTime.now().toIso8601String();
2.创建并注册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;
});
}
注意：当直接使用ui.platformViewRegistry.registerViewFactory时会提示无法找到该方法，解决方案看这里：https://www.jianshu.com/p/76ec2254c3af
3.使用HtmlElementView控件加载注册的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标签。
添加Html控件页面内容
从截图中我们可以看到，页面中已经包含img控件了，到这一步大家都认为，有了img标签微信终于能识别图片找那个的二维码了，但是经过验证，发现微信虽然能识别页面包含图片，但是长按图片仍然无法识别图片中包含的二维码。因为flutter web 页面默认是支持缩放的，微信在截图的时候并不一定能截取到完整的二维码图片，解决方案如下：
在index.html中设置：初始缩放为1，最大缩放值要大于1，不支持缩放。如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
识别成功
网友评论