原生app转换成flutter for web后,发现用image库的decodeimage函数在网页上慢到无法忍受,通过查资料了解用网页的canvas直接加载处理。以下是图片选择/拍照,压缩后转到base64的主要代码,希望能帮到有同样困惑的小伙伴们。
import 'package:image_picker/image_picker.dart';
import 'package:image_picker_for_web/image_picker_for_web.dart';
///摄像头拍摄照片
Future getImage() async {
ImagePickerPlugin plugin;
plugin = ImagePickerPlugin();
PickedFile image = await plugin.pickImage(source: ImageSource.camera,maxWidth:300,imageQuality: 80);
if(image==null) return;
print(image.path);
List<int> imagedata=await image.readAsBytes();
await EncodeUtil.imageFile2Base64(image.path,imagedata).then((base64data) {
print(data)
});
}
///从相册选取
Future chooseImage() async {
ImagePickerPlugin plugin;
plugin = ImagePickerPlugin();
PickedFile image = await plugin.pickImage(source: ImageSource.gallery,maxWidth:300,imageQuality: 80);
if(image==null) return;
List<int> imagedata=await image.readAsBytes();
await EncodeUtil.imageFile2Base64(image.path,imagedata).then((base64data) {
print(data)
});
}
————————————————————————————————————————————————————
import 'package:image/image.dart' as ImageA;
import 'dart:html' as html;
import 'package:exif/exif.dart';
import 'dart:convert';
import 'dart:io';
static Future imageFile2Base64(String imagePath,List<int> data) async {
//旋转角度,主要针对手机拍照照片会翻转
int ratate=await getEXIFOrientationCorrection(data);
double qualitynum=10000.0;
//压缩到30kb以下
//var image = ImageA.decodeImage(data); //直接解码会超级慢
//以下操作是关键加速部分
html.ImageElement myImageElement = html.ImageElement(src: imagePath);
await myImageElement.onLoad.first; // allow time for browser to render
html.CanvasElement myCanvas = html.CanvasElement(width: myImageElement.width, height: myImageElement.height);
html.CanvasRenderingContext2D ctx = myCanvas.context2D;
ctx.drawImage(myImageElement, 0, 0);
html.ImageData rgbaData = ctx.getImageData(0, 0, myImageElement.width, myImageElement.height);
var image = ImageA.Image.fromBytes(rgbaData.width, rgbaData.height, rgbaData.data);
var image2= ImageA.copyResize(image,width: 300);
//需要旋转
if(ratate!=0) {
image2=ImageA.copyRotate(image2, ratate);
}
var jpg = ImageA.encodeJpg(image2, quality: 100);
int length=jpg.length;
while(length>40000) {
if(length>1000000)
qualitynum=qualitynum*0.6;
else
qualitynum=qualitynum*0.9;
jpg = ImageA.encodeJpg(image2, quality: (qualitynum/100).toInt());
length=jpg.length;
}
var png64 = base64Encode(jpg);
length=png64.length;
String base64Image;
base64Image = await 'data:image/jpg;base64,' + png64;
return base64Image;
}
static Future<int> getEXIFOrientationCorrection(List<int> image) async {
int rotationCorrection = 0;
Map<String, IfdTag> exif = await readExifFromBytes(image);
if (exif == null || exif.isEmpty) {
} else {
// http://sylvana.net/jpegcrop/exif_orientation.html
IfdTag orientation = exif["Image Orientation"];
int orientationValue = orientation.values[0];
// in degress
switch (orientationValue) {
case 6:
rotationCorrection = 90;
break;
case 3:
rotationCorrection = 180;
break;
case 8:
rotationCorrection = 270;
break;
default:
}
}
return rotationCorrection;
}