How to transfer an image created with php to js?

Question

PHP

JS:

$('#view').on('click',function(){
    var obj = $('#img-resize');
    var file_dir = obj.attr('src');
    $.ajax({
      url: '/ajax/img_to_img.php',
      dataType: 'text',
      data: 'file_dir='+file_dir,
      type: 'post',
      success: function(data){
        console.log(data);
      }
     });
  });

PHP:

$path = $_SERVER['DOCUMENT_ROOT'];
$imgBig = '/ajax/circle.png';
$imgSmall = $file_dir;

$img1 = imagecreatefromjpeg($path . $imgBig);
$img2 = imagecreatefromjpeg($path . $imgSmall);

if($img1 and $img2) {
    $x2 = imagesx($img2);
    $y2 = imagesy($img2);
    imagecopyresampled(
        $img1, $img2,
        20, 20,
        0, 0,
        $x2, $y2,
        $x2, $y2
    );
    header('Content-type: image/jpeg');
    imagejpeg($img1, null, 100);
} else {
    header('HTTP/1.1 404 Not Found');
}

How do I get the created image in js and display it on the screen?

Answer 1

Easiest is something like this:

let img = document.createElement('img')
img.src = '/ajax/img_to_img.php?file_dir=' + file_dir;