Client-side, an image is created (canvas.toDataURL) from the contents of a div:
... var img = new Image(); var dataUrl; img.onload = function() { //alert($('#top-content').width()); context.canvas.width = $('#divID').find('svg').width(); context.canvas.height = $('#divID').find('svg').height(); var width2heightratio = context.canvas.width / context.canvas.height; //return; context.drawImage(img, 0, 0); // freeing up the memory as image is drawn to canvas DOMURL.revokeObjectURL(url); if (isIEBrowser()) { // Check of IE browser var svg = $('#divID').highcharts().container.innerHTML; canvg(canvasIE, svg); dataUrl = canvasIE.toDataURL(); } else{ dataUrl = canvas.toDataURL('image/png'); } var dataString = 'img=' + dataUrl; $.ajax({ url: "resources/assets/php/reports_generate_pdf.php", type: "POST", dataType:'json', data: dataString, cache: false, success: function(data){ alert('success'); }, error: function(XMLHttpRequest, textStatus, errorThrown) { $('#MsgDiv').html('XMLHttpRequest: ' + XMLHttpRequest + '<br>textStatus: ' + textStatus + '<br>errorThrown: ' + errorThrown); } }) }; img.src = url; function isIEBrowser(){ var ieBrowser; var ua = window.navigator.userAgent; var msie = ua.indexOf("MSIE "); if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer { ieBrowser = true; } else //Other browser { console.log('Other Browser'); ieBrowser = false; } return ieBrowser; }; ... PHP:
<?php $img= $_POST['img']; //data 'data:image/png;base64,~; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $upload_dir='/public/images/'; $file = $upload_dir."image_name.png"; $success = file_put_contents($file, $data); ?> I'm seeking to be able to save the image server-side in the /public/images/ directory. Any advice is appreciated.
