关于flutter for web 图片压缩上传base64的处理

    原生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;
}