Блог

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

Также мой код 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' />";
 }
 

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

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"));