Skip to content

Instantly share code, notes, and snippets.

@plateaukao
Created April 13, 2019 05:18
Show Gist options
  • Save plateaukao/ebb5e7169dd89cc52bda338762d4997e to your computer and use it in GitHub Desktop.
Save plateaukao/ebb5e7169dd89cc52bda338762d4997e to your computer and use it in GitHub Desktop.
image remove background in flutter
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;
}
@nit900
Copy link

nit900 commented Oct 22, 2022

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?

@zynxyzouo
Copy link

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

@Alvarocda
Copy link

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

@KoOVERLINE
Copy link

KoOVERLINE commented May 26, 2023

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

@KoOVERLINE
Copy link

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('사진 초기화')),

          ],
        ),
      ),
    );
  }
}

@hydev777
Copy link

hydev777 commented Oct 2, 2023

This coded worked for me, thanks!

@Aishh2211
Copy link

Its not removing background , making the shade of white greyish

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment