如何在用户分享图片时给图片添加（文字或图标）？

Question

请帮助我，我想在用户想要共享时在图像和文本上加水印，我尝试了很多但无法得到正确的结果。只找到这个example

我的分享图片代码是::

import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';

void sharePhoto(String uurl) async {
  final urlImage = uurl;

  final url = Uri.parse(urlImage);
  final response = await http.get(url);

  final bytes = response.bodyBytes;

  final temp = await getTemporaryDirectory();
  final path = '${temp.path}/image.jpg';

  File(path).writeAsBytesSync(bytes);

  await Share.shareFiles([path], text: "dfgdfgdf gdf gdf g");
}

Answer 1

下面是一个示例，说明如何在共享之前叠加两个图像。如果您仍在寻找如何去做，您可以以此为起点。显然，必须进行更多的完整性检查，将其仅视为 POC。也把它当作一粒盐，因为我自己已经进入 dart/flutter 一个半星期了，并且很乐意接受 advises/comments/suggestions 重新编写此代码。

这是结果的 quick 8s video。

import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';
import 'package:http/http.dart' as http;
import 'package:image/image.dart' as img;
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(const MyApp());
}

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

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

class _MyAppState extends State<MyApp> {
  var imageBytes;

  Future<Uint8List> _getImage() async {
    final response = await http.get(Uri.parse(
        'https://upload.wikimedia.org/wikipedia/commons/d/dd/Stack_Overflow_Home.png'));
    imageBytes = response.bodyBytes;
    return response.bodyBytes;
  }

  void _share(Uint8List originallImage) async {
    final image = img.decodePng(originallImage)!;

    // get second image
    final responseWaterMark = await http
        .get(Uri.parse('http://www.dspsl.com/images/700_confidential.png'));
    final waterMark = img.decodeImage(responseWaterMark.bodyBytes)!;

    // resize watermark if needed (like in my case)
    final resizedWaterMark =
        img.copyResize(waterMark, height: image.height, width: image.width);

    // you may want to calculate the size of the resulting image
    // based on other parameters
    final mergedImage = img.Image(image.width, image.height);

    // copy image and watermark into the resulting image
    img.copyInto(mergedImage, image);
    img.copyInto(mergedImage, resizedWaterMark);

    // prep data in the temp folder
    final mergedImageBytes = img.encodePng(mergedImage);
    final directory = await getTemporaryDirectory();
    final path = directory.path;
    final imagePath = File('$path/image.png');
    imagePath.writeAsBytesSync(mergedImageBytes);

    // share image
    await Share.shareFiles([imagePath.path]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FutureBuilder(
            future: _getImage(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Column(
                  children: [
                    Image.memory(snapshot.data as Uint8List),
                    TextButton(
                      onPressed: () {
                        _share(imageBytes);
                      },
                      child: const Text(
                        'Share Image',
                        style: TextStyle(fontSize: 40),
                      ),
                    )
                  ],
                );
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            }),
      ],
    ))));
  }
}

如何在用户分享图片时给图片添加（文字或图标）？

How to add (text or icon) to image when the users share the image?

dart

flutter

flutter-test