<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
<head>
<meta charset="utf-8">
<script src="fabric.min.js"></script>
</head>
<body>
https://stackoverflow.com/questions/39394129/saving-a-base64-string-as-an-image-into-a-folder-on-server-using-c-sharp-and-web
<canvas id="canvas" width="1050" height="500" style="border:1px solid #aaa"></canvas>
<br />
<a href="#" onclick="EmbleemPositieOpslaan();">Opslaan</a>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 1;
var canvasOffset = $("#canvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
}
img.src = "polo.jpg";
canvas.addEventListener('mousedown', plaatsEmbleem);
function plaatsEmbleem(e) {
var pos = getMousePos(canvas, e);
posx = pos.x;
posy = pos.y;
ctx.fillStyle = "#ff0000";
ctx.beginPath();
ctx.arc(posx, posy, 30, 0, 2 * Math.PI);
ctx.fill();
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function EmbleemPositieOpslaan() {
var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
// stop dit in een hidden input?
var data = dataURL.replace(/^data:image\/\w+;base64,/, "");
}
</script>
</body>
</html>
