Angularjs .success {} с изображением, сгенерированным php

Question

Я пытаюсь открыть результат guestprint.php (генерирует изображение с входными данными) с функцией успеха.

Controller.js:

$scope.guestPrint = function() {

 $http({
   url: request_server + 'guestprint.php',
   method: 'POST',
   data: $scope.admin,
   headers: {
   'Content-Type': 'application/x-www-form-urlencoded'
   }

 }).success(function(response, status, headers, config) {
                     ---???---
 });

}

guestprint.php:

<?php
header('Access-Control-Allow-Origin: *');
header("content-type: application/json");

$data = json_decode(file_get_contents("php://input"));

//...
//..database and authorisation stuff
//...

if($result['result'] == 1 && $user_role == 1 ) {
    $ModelCertificate=new ModelCertificate();
    echo json_encode($ModelCertificate->guestIDCard($data));
}
//...

• guestIDCard () начинается с header('Content-type: image/jpeg');
• Если я пытаюсь сохранить изображение, оно работает. (imagejpeg($img, "./save/here/or/here");) Но я пытаюсь вывести его в браузер без сохранения

Итак, как я могу перенаправить себя на guestprint.php, когда он успешно создает изображение с данными из $, которые я получил из форм?

Answer 1

Я устал от этого и сделал это с сохранением изображения.

---

Controller.js:

$scope.guestPrint = function() {
    $http({
        url: request_server + 'guestprint.php',
        method: 'POST',
        data: $scope.admin, //dont mind this
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).success(function(response, status, headers, config) {
       $http({
        url: request_server + 'guestdw.php',
        method: 'POST',
        data: { user: $rootScope.user }, //dont mind this
        responseType: 'arraybuffer',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded' //!important
        }
        }).success(function(response, status, headers, config) {

        var blob = new Blob([response], {
            type: "image/jpeg"
        });
        var objectUrl = URL.createObjectURL(blob);
        window.open(objectUrl);
        });
    });
}

guestdw.php:

$yourfile = "./path/to/file.jpeg";
    $file_name = basename($yourfile);
    header('Content-Description: File Transfer');
    header('Content-Type: image/jpeg');
    header('Content-Disposition: attachment; filename="'.($file_name).'"');
    header('Content-Transfer-Encoding: binary');
    header('Content-Length: ' . filesize($yourfile));
    readfile($yourfile);

Answer 2

Один из подходов заключается в преобразовании имеющегося на сервере изображения в строку base64.

$data = file_get_contents(<PATH TO IMG>);
$base64 = 'data:image/<IMAGE EXTENSION (png, jpg, etc..)>;base64,' . base64_encode($data);

Отправьте эту строку base64 обратно во внешний интерфейс.

Как только он у вас появится, вы можете использовать эту строку base64 в качестве источника изображения.

<img ng-src="{{base64img}}">

p.s .: .success () и .error () устарели (1.4+) и полностью удалены в (1.6+). Я рекомендую использовать .then (успех, ошибка)