Как кэшировать изображения, сгенерированные imagick?

Question

Я использую функцию ниже, чтобы создать изображение с текстом на нем.Мне интересно, как я могу сделать так, чтобы изображение генерировалось только один раз для пользователя, а затем изображение кэшируется в их браузере.Моя цель - сэкономить ресурсы сервера.

Также мой код imagick выглядит хорошо?Я беспокоюсь, что могу получить какую-то утечку памяти.Спасибо за любую помощь

function small_image($username){

$file_content = file_get_contents("https://example.com/wp-content/uploads/2019/04/image.jpg");

$imagick = new Imagick();
$imagick -> readImageBlob($file_content);

$draw = new ImagickDraw();
$pixel = new ImagickPixel( 'gray' );
$draw->setFillColor('white');

/* Font properties */
$draw->setFont('Utopia');
$draw->setFontSize( 50 );

$geo=$imagick->getImageGeometry(); 

$imagick->annotateImage($draw, 60, 185, 0, $username);

$imgBuff = $imagick->getImageBlob();
$imagick->clear(); 

$img = base64_encode($imgBuff);
$imagick -> destroy();
return "<img id='imagick-banner' width=500 alt='Embedded Image' src='data:image/png;base64,$img' />";
 }

Answer 1

Вы упомянули экономию ресурсов сервера, поэтому попробуйте заставить браузер клиента работать. Предостережение этого метода заключается в том, что у пользователя должен быть правильный шрифт, или вы должны будете указать шрифт на веб-сайте.

HTML

<canvas id="userImage"></canvas>

JavaScript

window.onload = function() {
    var canvas = document.getElementById("userImage");
    var context = canvas.getContext("2d");
    var imageObject = new Image();
    imageObject.onload = function(){
        context.drawImage(imageObj, 10, 10);
        context.font = "50pt Utopia";
        context.fillText(username, 60, 185);
    };
    imageObject.src = userImageURI;
    document.getElementById('userImage').appendChild(imageObject);
};

В качестве более строгого ответа, используя imagick, попробуйте localStorage в JavaScript (сначала ваш php обработает его, а JavaScript решит, когда запрашивать новое изображение).

localStorage.setItem("userImage", base64data);
var userImage = document.body.appendChild("img");
userImage.setAttribute('src', "data:image/png;base64, " + localStorage.getItem("userImage"));