画像化とモノクロ化する処理をボタン一つで実装したい

前提・実現したいこと

現在HTML,Javascript,canvasで以下を実装しています。
0. 画像の切り抜き(crop)
0. 画像とテキストを一枚の画像化
0. それをモノクロ化
0. 画像ダウンロード

2.と3.に関して、一つのボタンで実装したいのですが、なかなかその方法を見つけることができていません。
それに関してアドバイスいただけないでしょうか？

現状はそれぞれの処理は実装できています。
また以下のようなレイアウトです。

困っていることとしては以下です。
2.の処理は具体的にはcanvas上にcropした画像とテキストを描画することで、画像化することができています。
3.の処理を2.と同じクリックイベント内でやりたいですが、画像化されていないものに対してグレー化するような動きになってしまいうまくいきませんでした。
そのため、一度画像化のクリックイベントを実行し、その後、グレー化のクリックイベントを実行することで実現はできます。
しかし、２回ボタンを押さないといけないのでそれを１回で済ませたいです。

試したこと

実装としては以下です。

html
1<!DOCTYPE html>
2<html>
3<head lang="en">
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7<!--[if lt IE 9]>
8<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
9<![endif]-->
10<title>Tinny Cropper</title>
11<link rel="stylesheet" href="style.css" type="text/css" />
12
13<style>
14  .container{
15  position: absolute;
16  top: 0; left: 5%; right: 0; bottom: 0;
17}
18.action{
19  width: 400px;
20  height: 30px;
21  margin: 10px 0;
22}
23.cropped>img{
24  margin-right: 10px;
25  filter: grayscale(100%);
26}
27
28#result{
29  filter: grayscale(100%);
30}
31
32.imageBox{
33  position: relative;
34  height: 600px;
35  width: 600px;
36  border:1px solid #aaa;
37  background: #fff;
38  overflow: hidden;
39  background-repeat: no-repeat;
40  cursor:move;
41}
42.imageBox .thumbBox{
43  position: absolute;
44/*  top: 10%;
45  left: 50%;*/
46  width: 512px;
47  height: 96px;
48/*  margin-top: -100px;
49  margin-left: -100px;*/
50  margin-top: 252px;
51  margin-left: 44px;
52  box-sizing: border-box;
53  border: 1px solid rgb(102, 102, 102);
54  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
55  background: none repeat scroll 0% 0% transparent;
56}
57.imageBox .spinner{
58  position: absolute;
59  top: 0;
60  left: 0;
61  bottom: 0;
62  right: 0;
63  text-align: center;
64  line-height: 400px;
65  background: rgba(0,0,0,0.7);
66}
67</style>
68</head>
69<body>
70<script src="cropbox.js"></script>
71<div class="container">
72    <p>テキストを入力してください</p>
73    <textarea name="textdate" id="textarea"></textarea>
74
75    <p>画像をアップロードして切り取ってください</p>
76    <div class="imageBox">
77        <div class="thumbBox"></div>
78        <div class="spinner" style="display: none">Loading...</div>
79    </div>
80    <div class="action">
81        <input type="file" id="file" style="float:left; width: 250px;">
82        <input type="button" id="btnCrop" value="画像を切り取る" style="float: right">
83        <input type="button" id="display" value="テキスト表示" style="float: right">
84        <input type="button" id="toimage" value="画像化" style="float: right">
85        <input type="button" id="gray" value="グレー化" style="float: right">
86    </div>
87
88
89    <div id="target">
90        <img src="../images/botan.jpg" alt="" style="width: 100px;">
91        <div class="cropped">
92            
93        </div>
94        <p class="textvalue">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
95    </div>
96  <img src="" id="result"/>
97
98  <a href="" id="ss" download="html_ss.png">スクリーンショット(document.body全体)をダウンロード</a>
99
100
101</div>
102<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
103<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
104
105<script type="text/javascript">
106// 画像切り取り
107    window.onload = function() {
108        var options =
109        {
110            imageBox: '.imageBox',
111            thumbBox: '.thumbBox',
112            spinner: '.spinner',
113            imgSrc: 'avatar.png'
114        }
115        var cropper;
116        document.querySelector('#file').addEventListener('change', function(){
117            var reader = new FileReader();
118            reader.onload = function(e) {
119                options.imgSrc = e.target.result;
120                cropper = new cropbox(options);
121            }
122            reader.readAsDataURL(this.files[0]);
123            this.files = [];
124        })
125        document.querySelector('#btnCrop').addEventListener('click', function(){
126            var img = cropper.getDataURL()
127            document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
128        })
129        document.querySelector('#btnZoomIn').addEventListener('click', function(){
130            cropper.zoomIn();
131        })
132        document.querySelector('#btnZoomOut').addEventListener('click', function(){
133            cropper.zoomOut();
134        })
135
136    };
137
138// テキストエリアの中身を表示
139    document.getElementById('display').addEventListener('click', function(){
140        $(".textvalue").text($("#textarea").val());
141    })
142
143// 要素の画像化
144    document.getElementById('toimage').addEventListener('click', function(){
145      //HTML内に画像を表示
146      html2canvas(document.getElementById("target"),{
147        onrendered: function(canvas){
148          //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
149          var imgData = canvas.toDataURL();
150          document.getElementById("result").src = imgData;
151        }
152      });
153
154    })
155
156    document.getElementById('gray').addEventListener('click', function(){
157        $("#result").each(function() {
158
159            // キャンバスに画像を描画する
160            var canvas = document.createElement("canvas");
161            var ctx = canvas.getContext("2d");
162            var img = new Image();
163            img.src = $(this).attr("src");
164            canvas.width = img.width;
165            canvas.height = img.height;
166            ctx.drawImage(img, 0, 0);
167
168            // 画像の各ピクセルをグレースケールに変換する
169            var pixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
170            for (var y = 0; y < pixels.height; y++) {
171                for (var x = 0; x < pixels.width; x++) {
172                    var i = (y * 4) * pixels.width + x * 4;
173                    var rgb = parseInt((pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 3, 10);
174                    pixels.data[i] = rgb;
175                    pixels.data[i + 1] = rgb;
176                    pixels.data[i + 2] = rgb;
177                }
178            }
179            ctx.putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
180
181            // 画像を差し替える
182            $(this).attr("src", canvas.toDataURL());
183            var imgData = canvas.toDataURL();
184            document.getElementById("ss").href = imgData;
185
186        });
187    });
188
189
190</script>
191</body>
192</html>