How to download image from php file with javascript

Question

but i have a problem with that. I extract the image from php file as under:-

<img src="http://localhost/wordpress/image.php" class="downloadable" id="mainimage"/>

and then i want to download it with javascript as under:-

$('img.downloadable').each(function(){
  var $this = $(this);
  $this.wrap('<a href="' + $this.attr('src') + '" download />')
});

The problem is that it download php file but i want to download it as PNG.

Extracts of image.php are as under:-

header ("Content-type: image/png");
$userinput = $_GET["user_input"];
$image=imagecreatefrompng('myimages/***image.png***'); 
$font_file = 'fonts/PR8Charade.ttf';
$col1 = imagecolorallocate($image, 129, 125,11);
    $text_size1 = 36;
    $xposition1 = 245;
    $yposition1 = 380;
    $angeldirection1 = 50;
    imagettftext($image, $text_size1, $angeldirection1, $xposition1, $yposition1, $col1, $font_file, $userinput);
ImagePng($image);
imagedestroy($image);

I want to download the image.png file from image.php.

you need to output a content-disposition header which allows you to specify a filename for the "download". Since you don't have one, the browser simply chooses the most obvious filename it can - the name of the file in the url you're downloading from, which is image.php — Marc B
– Marc B, Commented Jun 9, 2016 at 17:16
after creating image, you can sent image url to client, then window.open(imageUrl) will download your image — sabbir
– sabbir, Commented Jun 9, 2016 at 17:19

Vitaly · Accepted Answer · 2016-06-09 17:21:59Z

1

<?php
//path to png image
$file = 'picture.png';

if (file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename="'.basename($file).'"');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    readfile($file);
    exit;
}
?>

answered Jun 9, 2016 at 17:21

Vitaly

1,2812 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Torbjörn Stabo Over a year ago

With the possible caveat that you heed the file sizes. stackoverflow.com/questions/11786734/readfile-and-large-files might be worth reading. Also I'd like to suggest using xsendfile (header) if you can, it might be more effective.

Collectives™ on Stack Overflow

How to download image from php file with javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related