base64をformとしてPOSTしたい

画像送信フォームを作っています。
input type="file"でアップした画像をjqueryでクリッピングしています。
(http://flipsblog.jp/archives/1393 ←これを使っています。)
キリヌキ後はbase64でポンと表示されるのですが、これをsubmit押したとき一緒にpostできないかなと思って試行錯誤しています。
なにかいい方法はありませんでしょうか。。

<form method="post" action=""> <div class="imageBox"> <div class="thumbBox"></div> <div class="spinner" style="display: none">Loading...</div> </div> <div class="action"> <input type="file" id="file" style="float:left; width: 250px"> <input type="button" id="btnCrop" value="Crop" style="float: right"> <input type="button" id="btnZoomIn" value="+" style="float: right"> <input type="button" id="btnZoomOut" value="-" style="float: right"> </div> <div class="cropped"> ※ここにbase64が表示されます。 </div> <input type="submit" value="送信"> </form>

https://teratail.com/questions/11714
↑こちらを参考にしようとしたのですが、うまくいきませんでした。。

ほんとうに初心者でガバガバで申し訳ありませんが、お力添えを願います。

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<title>canvas</title>
6</head>
7<script src="http://code.jquery.com/jquery-latest.js"></script>
8<style>
9#canvas { display: none; }
10</style>
11<script>
12$(function() {
13  var canvas = document.querySelector('#canvas')
14  var ctx = canvas.getContext('2d');
15  var img = document.getElementById('foo');
16  ctx.drawImage(img, 0, 0);
17  alert(canvas.toDataURL());
18});
19</script>
20<body>
21<img id="foo" src="http://mattn.kaoriya.net/images/logo.png" alt="" crossOrigin="anonymous">
22<canvas id="canvas"></canvas>
23</body>
24</html>