画像上にテキストボックスをつけ、入力した文字と画像を一緒に保存する方法を教えてください

前提・実現したいこと

Monacaを使っています。
画像上にテキストを入力し、そのテキストと一緒に画像が保存できるようにしたいです。

発生している問題・エラーメッセージ

エラーと言うよりは、コードの書き方がいまいちわからなくて、
調べてはいるのですが、私の力不足により、方法が見いだせていません。

現在下記のコードのように、画像上にテクストボックスを挿入しています。

html
1  <div id="m1">
2     <img src="lib/woman.png"> 
3     <form id="t1" name="message1">
4     <textarea type="text1" name="namae" cols="18" rows="10">メッセージを書く</textarea>
5</form>

その後、Java scriptで入力した文字を保存しようと下記コードを入力しました。

JS
1function btn1_click(){
2
3    var message1 = document.message1.namae.value;
4    
5    localStorage.setItem('message1', message1);
6    localStorage.setItem('img1', "lib/woman.png");

しかし、このままだと文字だけの保存になってしまい、画像と一緒に保存ができません。

HTML
1  <script>
2    ons.ready(function() {
3      console.log("Onsen UI is ready!");
4     
5      
6        tab.on('postchange', function(event) {
7            alert('aaa');
8         });
9      
10    });
11
12    document.addEventListener('show', function(event) {
13      var page = event.target;
14      var titleElement = document.querySelector('#toolbar-title');
15
16      if (page.matches('#first-page')) {
17        titleElement.innerHTML = 'Capsule Gift';
18      } else if (page.matches('#second-page')) {
19        titleElement.innerHTML = 'Capsule Gift';
20        
21      }
22      var message1 = localStorage.getItem('message1');
23      var img1 = localStorage.getItem('img1');
24      
25      document.getElementById("message1").innerText = message1;
26      
27    });
28  </script>