Generare JPEG website screenshot in Laravel

Aici este locul unde puteti scrie despre orice probleme /intrebari, in limita bunului simt, care nu au legatura cu subiectele din celelalte forumuri, sau cu materialele de pe site.
andras
Mesaje: 422

Generare JPEG website screenshot in Laravel

Va urez LA MULTI ANI in 2018!
Intrebare: cum pot genera un fisier imagine (JPEG) dintr-un View (fisier HTML) in Laravel 5.4 si sa-l salvez pe server intr-o locatie?
Cu codul de bare a fost mai simplu, am generat in Laravel un cod de bare:

Cod: Selectaţi tot

$barcode = DNS2D::getBarcodePNG($vanz->id.'
       '.date('M j, Y G:i:s', strtotime($vanz->created_at)), 'QRCODE');
apoi am aplicat:

Cod: Selectaţi tot

$imgb64 = base64_decode($barcode);
si am salvat fisierul pe server:

Cod: Selectaţi tot

$filenamebarcode = 'barcode_'.$vanz->id.'.jpeg';
Storage::disk('barcode')->put($filenamebarcode, $imgb64);
Dar acum trebuie sa fac factura (in HTML) si sa generez tot o imagine direct din html. Cum fac asta? Multumesc.

cata1241
Arunca o privire aici: https://stackoverflow.com/questions/757 ... creenshots
Nu e ceva usor, dar se poate.

MarPlo
Salut
Poti incerca cu html2canvas.
- Scriptul din arhiva: html2canvas_screenshoot.zip (92 KB)
Sau:

1. Ia libraria html2canvas.js de la: https://html2canvas.hertzen.com/ si salveaz-o intr-un fisier pe server, de exemplu: html2canvas.js
2. Adauga urmatorul cod javascript in pagina la care vrei sa generezi screenshoot (detalii in comentariile din cod).

Cod: Selectaţi tot

<script src="html2canvas.js"></script>
<script>
// <![CDATA[
var php_file ='save_screenshoot.php';  //address of php file that get and save image on server
var imgname ='screenshoot';  //name of the image to save

/* 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 ='isajax=1';
  for(var k in data){
    k = k.toString();
    if(data[k] || data[k] ==''){
      str_data +='&'+ k +'='+ data[k].toString().replace(/\?/g, '%3F').replace(/=/g, '%3D').replace(/&/g, '%26').replace(/[ ]+/g, '%20').replace(/[\+]/g, '%2B');
    }
  }

  //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);
  }
}

//Uses HTML2Canvas to capture screenshoot of <body> content
html2canvas(document.body).then(canvas => {
  //get base64 string data of the screenshoot
  var base64image = canvas.toDataURL('image/jpeg');

  //set data that will be send with ajaxSend() to php (base64 image-data of the canvas, and image-name)
  var img_data = {cnvimg:base64image, imgname:imgname};

  //send image-data to php file, then alert response
  ajaxSend(img_data, php_file, 'post', function(resp){
    alert(resp);
  });
});
// ]]>
</script>
3. Creaza un fisier php "save_screenshoot.php" cu acest cod:

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/jpeg;base64,', ' '], ['', '+'], $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 .'.jpg'; 
$save = file_put_contents($file, $data);

//output response
echo $save ?'Image: '. $file .' successfully saved.' :'Unable to save the file.';
- Succes.

MarPlo
O varianta imbunatatita a codului prezentat mai sus e la pagina de la adresa:
coursesweb.net/javascript/html2canvas-save-page-screenshoot-server

- Sa-ti fie de folos.

Subiecte similare