Ik ben bezig met een website en wil daarbij ook Twitter gaan gebruiken. Ik wil een soort infographics gaan creëren door middel van MYSQL in HTML, daar een afbeelding van genereren, en die vervolgens tweeten. En dat dan automatisch. Ik ben al een aardig eindje op weg, maar heb nu jullie hulp nodig.
Ik kwam html2canvas tegen om screenshots te maken van een hele site of een element. Ik was een beetje aan het spelen gegaan met de demo-pagina en zou op zich wel kunnen krijgen wat ik wil, alleen creëert dat een blob. (dat onderst deel met gele rand is een afbeelding)
Nou ben ik (nog) niet zo ervaren met Javascript vandaar mijn vraag:
- Hoe kan ik die blob uploaden naar een map?
- Hoe kan ik die URL van de afbeelding als die aangemaakt in PHP krijgen?
- Of is er een nog beter alternatief?
Ik hoop dat jullie mij kunnen helpen. Alvast bedankt.
Groet
<html>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<script type="text/javascript">
html2canvas(d2).then(function(canvas) {
d2.appendChild(canvas);
});
</script>
</html>[size=xsmall]Toevoeging op 27/11/2016 00:32:49:[/size]
Ik heb het aan de praat gekregen. Ik heb alleen nog één vraag. Hoe weet ik zeker dat de afbeelding is geupload? Als ik dat in PHP door Twitter laat uploaden bestaat de kans dat de afbeelding nog niet bestaat denk ik?
HTML-pagina:
<?php
<html>
<body>
<div id='id' style="background:red; width: 20px; margin: 0 auto; border: 5px solid black; padding: 20px;">X</div>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="http://www.imtabido.nl/html2canvas/dist/html2canvas.js"></script>
<script type="text/javascript">
html2canvas(id, {
onrendered: function(canvas) {
id.appendChild(canvas);
//** Eigen invulling
var imgData = canvas.toDataURL('image/png');
var url = 'export.php';
$.ajax({
type: "POST",
url: url,
dataType: 'text',
data: {base64data : imgData}
});
//** Einde eigen invulling
}
});
</script>
</body>
</html>
?>Export.php
<?php
$data = $_REQUEST['base64data'];
$image = explode('base64,',$data);
file_put_contents('myImage.jpg', base64_decode($image[1]));
?>