Cod: Selectaţi tot
<script>
var dia = document.getElementById(cnv_id).toDataURL("image/jpeg", 1.0); // nu merge nici simplu toDataURL() fara parametri
savepng(dia);
</script>Cod: Selectaţi tot
<?php
$rezultat = file_put_contents($file,$dia);
?>Cod: Selectaţi tot
<canvas id="cnv1" width="400" height="280"></canvas>
<button id="btn_cnvimg">Save Canvas Image</button>
<div id="ajaxresp">Ajax response</div>
<script>
var cnv = document.getElementById('cnv1'); //canvas element, with id="cnv1"
var php_file ='save_cnvimg.php'; //address of php file that get and save image on server
/* Ajax Function
Send "data" to "php", using the method added to "via", and pass response to "callback" function
data - object with data to send, name:value; ex.: {"name1":"val1", "name2":"2"}
php - address of the php file where data is send
via - request method, a string: 'post', or 'get'
callback - function called to proccess the server response
*/
function ajaxSend(data, php, via, callback) {
var ob_ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //XMLHttpRequest object
//put data from 'data' into a string to be send to 'php'
var str_data ='';
for(var k in data) {
str_data += k +'='+ data[k].replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/[ ]+/g, '%20') +'&'
}
str_data = str_data.replace(/&$/, ''); //delete ending &
//send data to php
ob_ajax.open(via, php, true);
if(via =='post') ob_ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
ob_ajax.send(str_data);
//check the state request, if completed, pass the response to callback function
ob_ajax.onreadystatechange = function() {
if (ob_ajax.readyState == 4) callback(ob_ajax.responseText);
}
}
//register click on #btn_cnvimg to get and save image
var btn_cnvimg = document.getElementById('btn_cnvimg');
if(btn_cnvimg) btn_cnvimg.addEventListener('click', function(e){
var imgname = window.prompt('Set a name for the image.\n- If you set a name that already exists,\n the image will be replaced with current canvas-image\n\nLeave empty to let the script set an unique name.', '');
if(imgname !== null){
//set data that will be send with ajaxSend() to php (base64 PNG image-data of the canvas, and image-name)
var img_data = {'cnvimg':cnv.toDataURL('image/png', 1.0), 'imgname':imgname};
//send image-data to php file
ajaxSend(img_data, php_file, 'post', function(resp){
//show server response in #ajaxresp, if not exist, alert response
if(document.getElementById('ajaxresp')) document.getElementById('ajaxresp').innerHTML = resp;
else alert(resp);
});
}
});
</script>
<script>
//Draw some context in canvas (cnv)
var ctx = cnv.getContext('2d'); //canvas context
ctx.font = 'bold 28px sans-serif';
ctx.strokeText('CANVAS - Save this Image', 46, 50); //Text
ctx.strokeStyle = '#00f';;
ctx.lineWidth =2;
ctx.arc(200,135,50,0,Math.PI*2,true); //Face
ctx.moveTo(235,135);
ctx.arc(200,135,35,0,Math.PI,false); //Mouth
ctx.moveTo(190,125);
ctx.arc(185,125,4,0,Math.PI*2,true); //Left eye
ctx.moveTo(220,125);
ctx.arc(215,125,4,0,Math.PI*2,true); //Right eye
ctx.stroke();
</script>Cod: Selectaţi tot
<?php
define('UPLOAD_DIR', 'uploads/'); //Upload folder
//get properly base64 image data passed via post in 'cnvimg'
$cnvimg = trim(strip_tags($_POST['cnvimg']));
$cnvimg = str_replace('data:image/png;base64,', '', $cnvimg);
$cnvimg = str_replace(' ', '+', $cnvimg);
//set image name from 'imgname', or unique name set with uniqid()
$imgname = (isset($_POST['imgname']) && !empty(trim($_POST['imgname']))) ? trim(strip_tags($_POST['imgname'])) : uniqid();
//get image data from base64 and save it on server
$data = base64_decode($cnvimg);
$file = UPLOAD_DIR . $imgname .'.png';
$success = file_put_contents($file, $data);
//output response (link to image file, or error message)
print $success ? 'Image: <a href="'. $file .'" target="_blank">'. $file .'</a>' : 'Unable to save the file.';