如何从颤振中的图像中获取主色?
How to get dominant color from image in flutter?
我想从图像中提取主色,以便我可以将它作为混合应用到其他图像。我怎样才能做到这一点??
在我当前的代码中,我手动给出了颜色,但我希望它由应用程序生成。
class MyApp extends StatelessWidget {
Color face = new HexColor("a8a8a8");
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),
body: Column (
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget>[
new Image.asset('assets/images/6.jpg',
color: face, colorBlendMode:BlendMode.modulate ,
fit:BoxFit.cover,
height: 50,
width: 50,
),
new Image.asset('assets/images/1.jpg',
color: face, colorBlendMode: BlendMode.modulate,
fit:BoxFit.cover,
height: 200,
width: 200,
),
]),
])),
);
}
}
这里有 palette_generator 库,即使您在 youtube 或其他一些地方搜索,您也可以找到一些 tutorials 的结果。
我找到了使用 palette_generator 包的解决方案..
首先导入库
import 'package:palette_generator/palette_generator.dart';
也将其添加到 pubspec.yaml 文件中
下面的函数将 return 调色板
Future<PaletteGenerator>_updatePaletteGenerator ()async
{
paletteGenerator = await PaletteGenerator.fromImageProvider(
Image.asset("assets/images/8.jfif").image,
);
return paletteGenerator;
}
现在我们可以在未来的构建器中获取它
FutureBuilder<PaletteGenerator>(
future: _updatePaletteGenerator(), // async work
builder: (BuildContext context, AsyncSnapshot<PaletteGenerator> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting: return Center(child:CircularProgressIndicator());
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else {
// Color color=new Color(snapshot.data.dominantColor.color);
face=snapshot.data.dominantColor.color;
return new Text('color: ${face.toString()}');
}}})
这就是我们如何轻松获取主色
我想从图像中提取主色,以便我可以将它作为混合应用到其他图像。我怎样才能做到这一点??
在我当前的代码中,我手动给出了颜色,但我希望它由应用程序生成。
class MyApp extends StatelessWidget {
Color face = new HexColor("a8a8a8");
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Image from assets"),
),
body: Column (
mainAxisAlignment: MainAxisAlignment.center,
children:<Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children:<Widget>[
new Image.asset('assets/images/6.jpg',
color: face, colorBlendMode:BlendMode.modulate ,
fit:BoxFit.cover,
height: 50,
width: 50,
),
new Image.asset('assets/images/1.jpg',
color: face, colorBlendMode: BlendMode.modulate,
fit:BoxFit.cover,
height: 200,
width: 200,
),
]),
])),
);
}
}
这里有 palette_generator 库,即使您在 youtube 或其他一些地方搜索,您也可以找到一些 tutorials 的结果。
我找到了使用 palette_generator 包的解决方案.. 首先导入库
import 'package:palette_generator/palette_generator.dart';
也将其添加到 pubspec.yaml 文件中
下面的函数将 return 调色板
Future<PaletteGenerator>_updatePaletteGenerator ()async
{
paletteGenerator = await PaletteGenerator.fromImageProvider(
Image.asset("assets/images/8.jfif").image,
);
return paletteGenerator;
}
现在我们可以在未来的构建器中获取它
FutureBuilder<PaletteGenerator>(
future: _updatePaletteGenerator(), // async work
builder: (BuildContext context, AsyncSnapshot<PaletteGenerator> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting: return Center(child:CircularProgressIndicator());
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else {
// Color color=new Color(snapshot.data.dominantColor.color);
face=snapshot.data.dominantColor.color;
return new Text('color: ${face.toString()}');
}}})
这就是我们如何轻松获取主色