Hello, I would like to visualize single band tiff (an example would be a digital elevation model map that contains floating point values of the elevation in the pixel positions). The "image" doesn't have an internal colortable, but would come with a sidecar file describing it.

I was wondering if it is possible to visualize such a file and if yes, what would be the best way to plug into the image production to apply the colortable and transform from physical value to color pixel.

Thanks for any information you might throw in.

I get this error with a few images (very few out of thousands, but it keeps coming up), none of which appear to have any issues when opened in other applications: It occurs when I try to read the file.

RangeError (index): Invalid value: Only valid value is 0: 1
#0      List.[] (dart:core-patch/growable_array.dart:151)
#1      JpegScan._decodeHuffman (package:image/src/formats/jpeg/jpeg_scan.dart:134:18)
#2      JpegScan._decodeACSuccessive (package:image/src/formats/jpeg/jpeg_scan.dart:238:20)
#3      JpegScan._decodeBlock (package:image/src/formats/jpeg/jpeg_scan.dart:308:13)
#4      JpegScan.decode (package:image/src/formats/jpeg/jpeg_scan.dart:78:11)
#5      JpegData._readSOS (package:image/src/formats/jpeg/jpeg_data.dart:568:55)
#6      JpegData._read (package:image/src/formats/jpeg/jpeg_data.dart:338:11)
#7      JpegData.read (package:image/src/formats/jpeg/jpeg_data.dart:94:5)
#8      JpegDecoder.decodeImage (package:image/src/formats/jpeg_decoder.dart:46:10)
#9      decodeImage (package:image/src/formats/formats.dart:60:18)

Here is one such image:

Thanks for this great lib. You have provided couple fonts with this approach.

final BitmapFont arial_14 = new BitmapFont.fromZip(_ARIAL_14);
const List<int> _ARIAL_14 = const [...];

How is this _ARIAL_14 get generated? Is it possible to support Chinese Font?

This is my code. Image comes directly from the camera using the image_picker plugin:

var imageFile = await ImagePicker.pickImage(source: ImageSource.camera);

try {
      var pngImage = image.decodePng(imageFile.readAsBytesSync());
      print("## Image decoded fine");
      var jpegFile = new File(path.join(tempPath, 'upload.jpg'));
      print("## 1");
      var jpegBytes = image.encodeJpg(pngImage);
      print("## 1B");
      jpegFile.writeAsBytesSync(jpegBytes);
      print("## 2");
      imageFile = jpegFile;
      print("## 3");
    } catch (error) {
      print("## ERROR");
      print(error);
      print("## ERROR DONE");
    }

And it logs to console:

I/flutter (15417): ## Camera filename/storage/emulated/0/Android/data/com.scanrapp/files/Pictures/3967201f-c26f-49db-8d04-09929bace1f21282873232.png
I/flutter (15417): ## Image decoded fine
I/flutter (15417): ## 1
I/flutter (15417): ## ERROR
I/flutter (15417): NoSuchMethodError: The getter 'exif' was called on null.
I/flutter (15417): Receiver: null
I/flutter (15417): Tried calling: exif
I/flutter (15417): ## ERROR DONE

If instead of decodePng I use decodeImage, then it doesn't fail. But the generated image seems invalid, I can't open it with any application.

Hi, encoding/decoding images takes a little while (especially on mobile devices). It would be nice to have an optional progress event after each line or so of encoding/decoding. Possible?

Not sure this fits this library but: Support various GPU texture formats would be helpful for WebGL applications. ETC, PVRTC, S3TC/DXTC and maybe crunch. Not sure if its possible to write compression/decompression for all these formats in dart because some of them may have no public spec. Maybe it is easier to use binaries here.

When I use the encodePng(image) it returns with the error.

RangeError (index): Index out of range: index should be less than 57088: 57088

It says that the index should be less than 57088. However, my index is 5088 which is the image size.

These comments relate to Flutter as far as this is relevant.

I am seeing a fair few comments about performance. Sadly, I am seeing the same. Processing a camera roll photo, based on your simple sample, took 45 seconds. The copyResize took about 10 seconds.

Is this because this is done synchronously or is it just slow?

Is a shame as it does work.

Hey there,

I just implemented your image library with flutter and we are noticing very slow decoding on iOS.

This is my compression function:

  static Future<File> compressImageFile(File inputFile,
      {int resizePercentage = 50, int quality = 90}) async {
    List<int> bytes = await inputFile.readAsBytes();

    Image image = decodeImage(bytes);

    if (image.height > 1500 || image.width > 1500) {
      print("Resize required");
      print("Image size before: ${image.height}x${image.width}");
      var newWidth = (image.width / 100 * resizePercentage).toInt();
      var newHeight = (image.height / 100 * resizePercentage).toInt();

      Image resizedImage = copyResize(image, newWidth, newHeight);

      print("Image size after: ${resizedImage.height}x${resizedImage.width}");

      String originalFileName = basename(inputFile.path);
      String filePath = inputFile.parent.path;
      String newFile =
          join(filePath, originalFileName.split('.').first + "_compressed.jpg");

      File outputFile = new File(newFile);
      outputFile.writeAsBytesSync(encodeJpg(resizedImage, quality: quality),
          mode: FileMode.WRITE, flush: true);

      return outputFile;
    }

    return inputFile;
  }

This is the sample image we tried on both Android & iOS. Android takes around 5 seconds for the function to run (most time in "decodeImage") and the app crashed after a few minutes waiting for decodeImage on iOS.

https://www.pexels.com/photo/1-wtc-america-architecture-buildings-374710/

I am trying to use the library for resizing photos with the following illustrative code. But when i tested on real iphone (iphone 6s, ios 11.4) devices (i tested on two different ones and got the same result), it always got stuck on the function call decodeImage (just won't finish). But it worked fine on an iOS simulator. I tried different sizes of jpg images like a few hundred kilobytes to a few megabytes and got the same behavior.

Is this a known issue?

 // resize image into constrained dimensions (if necessary)
  static Future<Image> _capImageInFile(File originalImagePath) async {
    logger.fine("start decodeing");
    Image originalImage = decodeImage(await originalImagePath.readAsBytes());

    logger.fine(
        "it's a ${originalImage.height}*${originalImage.width} image from ${originalImagePath.path}");
  //...
}

I am using this function to decode a picture of about 100k, it takes about 10s-20s (dubug 3s and release >10s) to run on the Android real machine, and it will block the current UI display.

The debug version consumes about 3 seconds, while the release version consumes more than 10s. code show as below:

var image =  imageLib.decodeImage(imgfile.readAsBytesSync());

[255, 0, 0, 0, 255, 255, 0, 0, 255, 255, 255, 0, 255, 255, 255, 255, 255, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 0, 255, 0, 0, 0, 255, 255, 255, 255, 0, 0, 255, 0, 0, 0, 255, 0, 255, 0, 0, 0, 0, 0, 255, 0, 255, 255, 0, 255, 255, 255, 255, 255, 255, 255, 0, 255, 255, 0, 0, 0, 255, 0, 0, 0, 255, 255, 0, 255, 0, 0, 0, 255, 0, 0, 255, 255, 0, 0, 0, 0, 0, 0, 255, 0, 255, 255, 0, 255, 0]

I have the RGB list, how can i convert it to image using ur package?

Thank you for adding support for rounded corners to all the square-related APIs.

I'm trying to use use the copyResizeCropSquare to add support for generating round-corners icons (as required by Apple) to the flutter_launcher_icons. Starting off 1024x1024 icon, shrinking it to 824 size and using corner radius between 180..190.

image = compositeImage(
        Image(
          width: 1024,
          height: 1024,
          numChannels: 4,
          backgroundColor: ColorUint8.rgba(0, 0, 0, 0),
        ),
        copyResizeCropSquare(
          image,
          size: 824,
          radius: 190, // 185.4,
          interpolation:
              image.width >= 824 ? Interpolation.average : Interpolation.linear,
        ),
        center: true,
      );

The composite image has transparent black background. But I get the same results with transparent white and also without the composite image. The result has some noticeable artifacts on the rounded corners.

Not sure if I'm missing something about method call parameters or this method need some additional parameter to specify background color for the transparent antialiasing for the corner arc part.

If it would help, I can try to create a simpler example or a test in the image package.

You could also take a look at my fork of the flutter_launcher_icons at https://github.com/ekuleshov/flutter_launcher_icons.git use the macos_round_corners branch. Then:

cd example/flavors
flutter create .
flutter pub run flutter_launcher_icons

The generated file is located at example/flavors/macos/Runner/Assets.xcassets/AppIcon.appiconset/app_icon_1024.png

Please add a documentation to ImageData and how the channels in Image are handled. Looking the code it seems that the channels order is always red, green, blue and alpha.

Also I don't know a use case for an Uint32 channel if ImageData has multiple channels. I use in other projects an Uint32 to represent a 32bit pixels with 4 8bits values in it (like: r,g,b,a).

I'm in a similar situation to this question where I want to be able to rotate and transform the bounding box coordinates that copyRectify uses. I'm not so concerned about the structure to hold coordinates, but whether this is even possible: How to Transform Coordinates using a Matrix4

I took a whack at it using the Image Library and vector_math Library like the code below. Output: I am getting some rotation, but It is the image piece itself along with another portion of the larger image outside of the original bounding box (that's another problem when rotating too much): (top=original image piece, bottom=rotated) https://imgur.com/82WNCP6

Expected: I want the "bounding box/selection" to be rotated and then the image copied from there. For example, If I applied the rotation transformation to 30 degrees, then the output would be a normal, non-rotated image that has been cropped with rotated sides that look more rhomboid than square like this: https://imgur.com/WKXBKs1

Question Why is the entire image rotated and not the "bounding box"? Is it even possible to use CopyRectify to copy a piece of an image inside of a rotated rectangle or is my approach wrong?

 // initialize integers for initial points 
 // x2 is width ; y2 is height
 x1=0; y0=y; x2=100; y2=100;

// create 4 points of a rectangle for topLeft to bottomRight
  imglib.Point p1 = imglib.Point(x1, y1);
  imglib.Point p2 = imglib.Point(x2, y1);
  imglib.Point p3 = imglib.Point(x1, y2); 
  imglib.Point p4 = imglib.Point(x2, y2);

// put the 4 points in 4 vectors
  vector_math.Vector3 v1 = vector_math.Vector3(x1.toDouble() , y1.toDouble(), 1);
  vector_math.Vector3 v2 = vector_math.Vector3(x2.toDouble() , y1.toDouble(), 1);
  vector_math.Vector3 v3 = vector_math.Vector3(x1.toDouble() , y2.toDouble(), 1);
  vector_math.Vector3 v4 = vector_math.Vector3(x2.toDouble() , y2.toDouble(), 1);

// Create a matrix4, rotate it and apply it to all 4 points/vectors
 vector_math.Matrix4  T = vector_math.Matrix4.rotationZ(vector_math.radians(45));  
  v1 = T.transform3(v1);
  v2 = T.transform3(v2);
  v3 = T.transform3(v3);
  v4 = T.transform3(v4); 

// pull the new rotated point values out of the vectors: 
  p1.x = v1[0];
  p1.y =v1[1];
  p2.x = v2[0];
  p2.y =v2[1];
  p3.x = v3[0];
  p3.y =v3[1];
  p4.x = v4[0];
  p4.y =v4[1];

// copyRectify the source image with transformed points
imglib.Image angledSlice = imglib.copyRectify(
        srcImage, 
        topLeft: p1, 
        topRight: p2, 
        bottomLeft: p3, 
        bottomRight: p4,
         );

The decodePng used to work nicely with my PNG file in previous versions of Flutter. ByteData bytes = await rootBundle.load('images/pestscope_tm.png'); logoImage = image.decodePng(bytes.buffer.asUint8List()); Suddenly it decodes PNG file, the size is set, and some other data too, but buffer is full of zeros: Image blendMethod: BlendMode (BlendMode.over) channels: Channels (Channels.rgba) data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ... disposeMethod: DisposeMode (DisposeMode.clear) duration: 0 exif: ExifData height: 82 iccProfile: ICCProfileData textData: null width: 480 xOffset: 0 yOffset: 0 hashCode: 780885460 length: 39360 numberOfChannels: 4 runtimeType: Type (Image) I tried different methods and still getting zeros.