0

I have a canvas image saved inside a MYSQL Database, which can be seen inside a Table using datatables and PHP, but i am unable to download the image.

Here is my JS file, which sends the ajax request to the server:

$(document).ready(function(){
  var data = $('#dataList').DataTable({
    "lengthChange": false,
    "processing":true,
    "order":[],
    "ajax":{
        url:"/php/process.php",
        type:"POST",
        data:{action:'listData'},
        dataType:"json"
    },
    "columnDefs":[
        {
            "targets":[0, 5, 6],
            "orderable":true,
        },
    ],
    "pageLength": 10
  });

Here is the process.php

$sqlQuery = "SELECT * FROM table1 AS a LEFT JOIN sketch AS s ON a.id= s.id";

$auftragData = array();
$result = $this->dbc -> prepare($sqlQuery);
$result -> execute();

 while ( $tableResult= $result->fetch(PDO::FETCH_ASSOC) ) {
  $resultRows = array();
  $resultRows[] = $tableResult['id'];
  $resultRows[] = ucfirst($tableResult['cust_id']);
  $resultRows[] = $tableResult['typ'];
  $resultRows[] = $tableResult['status'];
  $resultRows[] = $tableResult['sketch'];
  if ($tableResult['sketch']) {
      $resultRows[] = '<a id="download" download="sketch.png"><button type="button">Download Image</button></a>';
        }
   $resultRows[] = '<button type="button" name="update" id="'.$tableResult["id"].'" class="btn btn-warning btn-xs update">update</button>';
   $resultRows[] = '<button type="button" name="delete" id="'.$tableResult["id"].'" class="btn btn-danger btn-xs delete" >delete</button>';
 $finalData[] = $auftragRows;
        }
$numRows = $result -> rowCount();

    $output = array(
        "draw"          =>  $numRows,
        "recordsTotal"      =>  $numRows,
        "recordsFiltered"   =>  $numRows,
        "data"          =>  $finalData
        );
        echo json_encode($output);
      $this->dbc = NULL;
      exit;
    }

The Img url is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAH0CAYAAABl8+PTAAAgAElEQVR4Xu3dB9glZ103/u8LJCHhpQkYCUWlWwAFFZDQO0F6lUAkFEEpghQpvuArRboUAaU36YYWpBMhFP1Lk1clIhZAOoIgCUko/+uHs/pks7vPmTkzZ2bOfOa6zrULue

How can i download the image with the above code?

tmzafar
  • 180
  • 3
  • 15
  • Possible duplicate of [Browser/HTML Force download of image from src="data:image/jpeg;base64..."](https://stackoverflow.com/questions/10473932/browser-html-force-download-of-image-from-src-dataimage-jpegbase64) – Vlad DX Aug 22 '19 at 22:50
  • the above question is regarding a simple download from client side. My URL is saved on the server side and i want to retrieve it to the client side and then make the download. The issue here is datatables – tmzafar Aug 23 '19 at 11:03
  • What the exact issue is? – Vlad DX Aug 23 '19 at 13:36
  • @VladimirSerykh i have implemented the way like it was mentioned in the above link, which you posted. i know use: – tmzafar Aug 23 '19 at 16:58
  • $resultRows[] = ''; function downloadSkizze() { var download = document.getElementById('downloadSketch'); download.setAttribute("href", download); } but i only get a black screen image. Something is not working. – tmzafar Aug 23 '19 at 17:26

1 Answers1

0

Found the issue. The field in the MySQL DB was cutting of characters, while saving the image on the Server. That solved the issue.

tmzafar
  • 180
  • 3
  • 15