<!DOCTYPE html>
<html>
<link rel="stylesheet" href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script src=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js">
</script>
<body>
<div class="col-md-offset-4 col-md-4 col--md-offset-4 top">
<div id="createImg" style="border:1px solid;">
<img id="image1" src="https://tvoehobbys.ru/upload/iblock/ad3/k0e2bibflvps3xyvmqkz0j5ah5n2fao2.jpg" style="display:none;"/>
<canvas id="myCanvas" width="800" height="600" style="border:2px solid #d3d3d3;">
Обновите браузер</canvas>
<br><br>
<input type="text" id="nashinput">
<button type="submit" id="poslat">Введите текст</button>
<button type="submit" id="fon">Фон</button>
<button id="geeks" type="button"
class="btn btn-primary top">
Create Image</button>
<div id="img" style="display:none;">
<img src="" id="newimg" class="top" />
</div>
</div>
<br>
</div>
<script>
document.getElementById('poslat').onclick = function(){
var tekt = document.getElementById('nashinput').value;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,500,0);
grd.addColorStop(0,"white");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0,0,800,600);
ctx.font = "50px Arial white";
ctx.strokeText(tekt,30,100);
};
</script>
<script>
document.getElementById('fon').onclick = function(){
var tekt = document.getElementById('nashinput').value;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var img=document.getElementById("image1");
var canvas=document.getElementById("myCanvas")
var x=canvas.getContext("2d");
x.drawImage(img,0,0);
ctx.fillStyle = "#FFF";
ctx.font = "italic 30pt Arial";
ctx.fillText(tekt,30,60);
};
</script>
<script>
$(function() {
$("#geeks").click(function() {
html2canvas($("#createImg"), {
onrendered: function(canvas) {
var imgsrc = canvas.toDataURL("image/png");
console.log(imgsrc);
$("#newimg").attr('src', imgsrc);
$("#img").show();
var dataURL = canvas.toDataURL();
$.ajax({
type: "POST",
url: "script.php",
data: {
imgBase64: dataURL
}
}).done(function(o) {
console.log('saved');
});
}
});
});
});
</script>
</body>
Простой
