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

Issue

PLease help me , i want to put watermark on the image and text when the user want share it ,I tried a lot but could not get a correct result. Found this example only

my share image code is ::

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

Solution

Below is an example of how you can overlay two images before you share it. If you are still looking for how to do it, you can use this as a starting point. Obviously, there has to be more sanity checking and all, treat this solely as a POC. Also take it a grain of salt, as I am a week and a half into dart/flutter myself, and will happily take advises/comments/suggestions re this code.

Here is a quick 8s video of the result.

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());
              }
            }),
      ],
    ))));
  }
}

Answered By – jabbson

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *