image remove background in flutter

image_remove_backgroun.dart

  Future<Uint8List> _downloadImage() async {
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = new File('$dir/$_filename');

    if (file.existsSync()) {
      var image = await file.readAsBytes();
      return image;
    } else {
      var response = await http.get(_url,);
      var bytes = response.bodyBytes;
      Uint8List newPng = await removeWhiteBackground(bytes);
      file.writeAsBytes(newPng);
      return newPng;
    }
  }

  Future<Uint8List> removeWhiteBackground(Uint8List bytes) async {
    Img.Image image = Img.decodeImage(bytes);
    Img.Image transparentImage = await colorTransparent(image, 255, 255, 255);
    var newPng = Img.encodePng(transparentImage);
    return newPng;
  }

Future<Img.Image> colorTransparent(Img.Image src, int red, int green, int blue) async {
  var pixels = src.getBytes();
  for (int i = 0, len = pixels.length; i < len; i += 4) {
    if(pixels[i] == red
        && pixels[i+1] == green
        && pixels[i+2] == blue
    ) {
      pixels[i + 3] = 0;
    }
  }

  return src;
}

In case you are not getting the background to be turned transparent, just add this line before line 25
src.channels = Img.Channels.rgba;

this code doesn't work, what am I doing wrong guys, please, help.

// the function returns  List<int> , but should return Future<Uint8List>, makes no sence !!?? What am I missing ?

var newPng = Img.encodePng(transparentImage) ;       
return newPng ;           // List

Spent a lot of time here, giving up =[

import 'dart:typed_data';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as Img;
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';
import 'package:path/path.dart';
//import 'package:file/file.dart';
import 'dart:async';
import 'dart:io';

class CriaSticker extends StatefulWidget {
  const CriaSticker({Key? key}) : super(key: key);

  @override
  State<CriaSticker> createState() => _CriaStickerState();
}

class _CriaStickerState extends State<CriaSticker> {
  @override
  Widget build(BuildContext context) {

    dynamic img = Imagem()._downloadImage();
    dynamic teste = Imagem().removeWhiteBackground(img as dynamic);
    //Future<Image> resu = Imagem().colorTransparent(teste, 110, 110, 110);

    if (kDebugMode) {
      print(img);
    }

    return const Center(child: Text('aabc',),);
  }
}


 class Imagem {

  Future<Uint8List> _downloadImage() async {
    String dir = (await getApplicationDocumentsDirectory()).path;
    //File file = File("http://photo.tuchong.com/4870004/f/298584322.jpg");

    final ByteData imageData = await NetworkAssetBundle(Uri.parse("http://photo.tuchong.com/4870004/f/298584322.jpg")).load("");
    final Uint8List finalImg = imageData.buffer.asUint8List();

    // display it with the Image.memory widget
    //var image = await file.readAsBytes();
    return finalImg;

  }

  Future<Uint8List>   removeWhiteBackground(Uint8List bytes) async {
    Img.Image? image = Img.decodeImage(bytes);
    Img.Image transparentImage = await colorTransparent(image!, 255, 255, 255);
    var newPng = Img.encodePng(transparentImage) as Future<Uint8List> ;
    return newPng ;
  }


  Future<Img.Image> colorTransparent(Img.Image src, int red, int green, int blue) async {
    var pixels = src.getBytes();
    for (int i = 0, len = pixels.length; i < len; i += 4) {
      if(pixels[i] == red
          && pixels[i+1] == green
          && pixels[i+2] == blue
      ) {
        pixels[i + 3] = 0;
      }
    }

    return src;
  }
}

@DemianGo return newPng as Uint8List;

@DemianGo could you do it? I've been trying for weeks and I can't !!!

greeting for the author for sharing this code.
i modified little things in the code and it works for me, hope this works for you.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:io';

Future<Uint8List?> removeWhiteBackground(Uint8List bytes) async {
  img.Image? image = img.decodeImage(bytes);
  img.Image? transparentImage = await colorTransparent(image!, 255, 255, 255);
  var newPng = img.encodePng(transparentImage!);
  Uint8List unit8list = Uint8List.fromList(newPng);
  return unit8list;
}


Future<Uint8List> _downloadImage() async {
  File file =File('your image path here');

  var image = await file.readAsBytes();

  return image;

}

Future<img.Image?> colorTransparent(img.Image src, int red, int green, int blue) async {
  var bytes = src.getBytes() ;
  for (int i = 0, len = bytes.length; i < len; i += 4) {
    if((bytes[i] == red&&bytes[i+1] == green&&bytes[i+2] == blue)
    ){
      bytes[i+3] = 0;
    }
  }

  return img.Image.fromBytes(src.width, src.height, bytes);
}

class RemoveBG extends StatelessWidget {
  RemoveBG({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: FutureBuilder(
        future: _downloadImage(),
        builder:(context, snapshot) => snapshot.data==null?SizedBox.shrink(): FutureBuilder(
          future: removeWhiteBackground(snapshot.data!),
          builder:(context, snapshot1) =>  snapshot1.data==null?SizedBox.shrink():Container(
            child: Center(
                child: Image.memory(snapshot1.data!,)
            ),
          ),
        ),
      ),
    );
  }
}

I don't get it I cant get Img.Image to work at all and cant find the library online anywhere. Did they change it to something else?

I don't get it I cant get Img.Image to work at all and cant find the library online anywhere. Did they change it to something else?

import 'package:image/image.dart' as img;←
the img.Image will work

It's working on version 3.2.0
Not working on latest version 4.0.15

Adding it to the 25th line does not make it transparent.

Future<Img.Image> colorTransparent(Img.Image src, int red, int green, int blue) async{
    src.channels = Img.Channels.rgba;
    var pixels = src.getBytes();
    for (int i = 0, len = pixels.length; i < len; i += 4) {
      if(pixels[i] == red
          && pixels[i+1] == green
          && pixels[i+2] == blue
      ) {
        pixels[i + 3] = 0;
      }
    }

    return src;
  }

This is All code.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:remove_background/remove_background.dart';
import 'dart:ui' as ui;

import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';

import 'package:image/image.dart' as Img;


class SignPage2 extends StatefulWidget {
  const SignPage2({super.key});

  @override
  State<SignPage2> createState() => _SignPage2State();
}

class _SignPage2State extends State<SignPage2> {

  final GlobalKey<SfSignaturePadState> signatureGlobalKey = GlobalKey();


  ui.Image? signImage;

  void _handleClearButtonPressed() {
    signatureGlobalKey.currentState!.clear();
  }


  //백그라운드 제거
  Future<Uint8List> removeWhiteBackground(Uint8List bytes) async {
    Img.Image? image = Img.decodeImage(bytes);
    Img.Image transparentImage = await colorTransparent(image!, 255, 255, 255);
    var newPng = Img.encodePng(transparentImage);
    return Uint8List.fromList(newPng);
  }

  Future<Img.Image> colorTransparent(Img.Image src, int red, int green, int blue) async{
    src.channels = Img.Channels.rgba;
    var pixels = src.getBytes();
    for (int i = 0, len = pixels.length; i < len; i += 4) {
      if(pixels[i] == red
          && pixels[i+1] == green
          && pixels[i+2] == blue
      ) {
        pixels[i + 3] = 0;
      }
    }

    return src;
  }

  void _handleSaveButtonPressed() async {
    final data =
        await signatureGlobalKey.currentState!.toImage(pixelRatio: 3.0);
    final bytes = await data.toByteData(format: ui.ImageByteFormat.png);

    Uint8List signImage;

    print('>>>데이터의 타입 : ${data.runtimeType}');
    if( bytes != null ){
      signImage = await removeWhiteBackground(Uint8List.fromList(bytes.buffer.asUint8List()));

      final result = await ImageGallerySaver.saveImage(Uint8List.view(signImage.buffer));

      ByteData item = await cutImage(context: context, image: data);
      
    }

    print('>>>바이트 형식 : ${bytes.runtimeType}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SYNCFUSION FLUTTER SIGNATUREPAD"),
      ),
      body: Center(
        child: Column(
          children: [
            Container(
              width: double.infinity,
              height: 400,
              decoration: BoxDecoration(
                border: Border.all(
                  width: 1.0, color: Colors.black, style: BorderStyle.solid
                ),
                color: Colors.blue,
              ),
              child: SfSignaturePad(
                key: signatureGlobalKey,
                backgroundColor: Colors.white,
              ),
            ),
            ElevatedButton(onPressed: _handleSaveButtonPressed, child: Text('사진 저장')),
            ElevatedButton(onPressed: _handleClearButtonPressed, child: Text('사진 초기화')),

          ],
        ),
      ),
    );
  }
}

This coded worked for me, thanks!

Its not removing background , making the shade of white greyish