画像編集後、プレビュー表示をし、LINE等で画像を送りたい

現在、Monacaを使って、
画像編集アプリを作っています。

画像上にテキストボックスを設置し、テキストを編集するところまで実装してあります。

今回の質問は以下です。

画像編集後（テキスト入力後）、
1枚の画像としてプレビュー表示をし、そのままLINEやメールでその画像を送信できるようにする方法を教えていただきたいです。

lang
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <link rel="stylesheet" href="components/loader.css">
8    <link rel="stylesheet" href="css/style.css">
9    <script src="components/loader.js"></script>
10    <script>
11        //
12        // TODO: Write JavaScript code here
13        //
14       
15    </script>
16</head>
17<body>
18    <!-- TODO: Please edit here -->
19<form>
20<input type="button" value="戻る" onClick="history.back()">
21</form>
22<br><br>
23    <div id="m1">
24     <img src="temp_1.jpg"　height="100%" width="100%" > 
25     <form id="t1" name="message1">
26     <textarea type="text1" name="namae" cols="32" rows="8"
27     style="position: absolute; left: 16%; top: 27%" >
28     メッセージを書く</textarea>
29   <input type="button" value="完了" onClick="btn1_click()">
30   </form>
31
32
33</body>
34</html>
35