Home > Back-end >  How to add (text or icon) to image when the users share the image?
How to add (text or icon) to image when the users share the image?

Time:09-17

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

CodePudding user response:

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