flutter - Flutter从var中的图像获取像素颜色

标签 flutter dart

假设我们有几个背景图片:

enter image description here

我们如何使用函数选择图像的左上,右上,左下,右下和中心中心像素颜色并将其保存在vars中?

我没找到什么好去的..

编辑,这是我到目前为止获得的代码。

import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:image/image.dart' as img;
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter/rendering.dart';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:muego_dev2/models/songs.dart';
import 'package:provider/provider.dart';



class ColorDetect extends StatefulWidget {
  //static const routeName = '/';

  @override
  _ColorDetectState createState() => _ColorDetectState();
}

class _ColorDetectState extends State<ColorDetect> {


 @override
  Widget build(BuildContext context) {

final coverData = 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';
img.Image photo;



void setImageBytes(imageBytes) {

    List<int> values = imageBytes.buffer.asUint8List();
    photo = null;
    photo = img.decodeImage(values);
  }

  // image lib uses uses KML color format, convert #AABBGGRR to regular #AARRGGBB
int abgrToArgb(int argbColor) {
  int r = (argbColor >> 16) & 0xFF;
  int b = argbColor & 0xFF;
  return (argbColor & 0xFF00FF00) | (b << 16) | r;
}


  // FUNCTION

 Future<void> _getColor() async {

Uint8List data = (await NetworkAssetBundle(Uri.parse(coverData))
      .load(coverData)
  )
      .buffer
      .asUint8List();

setImageBytes(data);

//FractionalOffset(1.0, 0.0); //represents the top right of the [Size].
double px = 1.0;
double py = 0.0;

int pixel32 = photo.getPixelSafe(px.toInt(), py.toInt());
int hex = abgrToArgb(pixel32);
print("Value of int: $hex ");

 }



    return Scaffold(
      appBar: AppBar(
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            flex: 2,
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(coverData),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(
              color: HOW TO APPLY MY HEX COLOR HERE?????,
            ),
          ),
          Spacer(),
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                MaterialButton(
                  elevation: 5.0,
                  padding: EdgeInsets.all(15.0),
                  color: Colors.grey,
                  child: Text("Get Sizes"),
                  onPressed: null,
                ),
                MaterialButton(
                  elevation: 5.0,
                  color: Colors.grey,
                  padding: EdgeInsets.all(15.0),
                  child: Text("Get Positions"),
                  onPressed: _getColor,
                )
              ],
            ),
          )
        ],
      ),
    );
  }}

这就是我用值$hex打印的内容
Restarted application in 1.419ms.
I/flutter ( 2103): Value of int: 4287593304

我不确定现在是否已经有十六进制值。那么如何将其应用于我的容器颜色?似乎还缺少一些东西。

最佳答案

您好您尝试使用此功能吗?

https://api.flutter.dev/flutter/image/Image/getPixel.html

int getPixel (
int x,
int y
)

从给定的x,y坐标获取像素。颜色在Uint32中编码为#AABBGGRR。不进行范围检查。

工作示例:
import 'dart:typed_data';

import 'package:image/image.dart' as img;
import 'package:flutter/rendering.dart';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
//import 'package:muego_dev2/models/songs.dart';
//import 'package:provider/provider.dart';


main() {
  runApp(MaterialApp(home: ColorDetect()));
}

class ColorDetect extends StatefulWidget {
  //static const routeName = '/';

  @override
  _ColorDetectState createState() => _ColorDetectState();
}

class _ColorDetectState extends State<ColorDetect> {
  final coverData =
      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg';

  img.Image photo;

  void setImageBytes(imageBytes) {
    print("setImageBytes");
    List<int> values = imageBytes.buffer.asUint8List();
    photo = null;
    photo = img.decodeImage(values);
  }

  // image lib uses uses KML color format, convert #AABBGGRR to regular #AARRGGBB
  int abgrToArgb(int argbColor) {
    print("abgrToArgb");
    int r = (argbColor >> 16) & 0xFF;
    int b = argbColor & 0xFF;
    return (argbColor & 0xFF00FF00) | (b << 16) | r;
  }

  // FUNCTION

  Future<Color> _getColor() async {
    print("_getColor");
    Uint8List data;

    try{
    data =
        (await NetworkAssetBundle(
          Uri.parse(coverData)).load(coverData))
            .buffer
            .asUint8List();
    }
    catch(ex){
      print(ex.toString());
    }

    print("setImageBytes....");
    setImageBytes(data);

//FractionalOffset(1.0, 0.0); //represents the top right of the [Size].
    double px = 1.0;
    double py = 0.0;

    int pixel32 = photo.getPixelSafe(px.toInt(), py.toInt());
    int hex = abgrToArgb(pixel32);
    print("Value of int: $hex ");

    return Color(hex);
  }

  @override
  Widget build(BuildContext context) {
    print("build");

    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          Flexible(
            flex: 2,
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(coverData),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: 

            FutureBuilder(
              future: _getColor(),
              builder: (_, AsyncSnapshot<Color> data){
                if (data.connectionState==ConnectionState.done){
                  return Container(
              color: data.data,
            );                
            }
            return CircularProgressIndicator();
              }
            ),
          ),
          Spacer(),
          Padding(
            padding: const EdgeInsets.only(bottom: 8.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                MaterialButton(
                  elevation: 5.0,
                  padding: EdgeInsets.all(15.0),
                  color: Colors.grey,
                  child: Text("Get Sizes"),
                  onPressed: null,
                ),
                MaterialButton(
                  elevation: 5.0,
                  color: Colors.grey,
                  padding: EdgeInsets.all(15.0),
                  child: Text("Get Positions"),
                  onPressed: _getColor,
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}

enter image description here

关于flutter - Flutter从var中的图像获取像素颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61793700/

相关文章:

firebase - 如何使用 flutter 从 firebase 获取下载 URL?

flutter - 如何相对于中心在 Stack 中定位小部件?

flutter - 如何在 Flutter 中禁用 Tab Bar 项的突出显示和飞溅行为

android - Firebase 谷歌身份验证不工作。 ApiException : 12500: , 空

dart - 递归使用组件

java - "No operations allowed after connection closed "使用 Dart 和 Java

dart - 如何从小部件中的 firestore 检索数据?

flutter - Dart:不重写泛型方法具有与返回类型相似的泛型参数类型

dart - 如何使 TextFormField 文本在验证时显示在 TextFormField 行下方

flutter - 是否可以使用flutter通过retrofit读取二进制文件?