如何缓存imagick生成的图像？

Question

我正在使用下面的函数生成带有文本的图像。我想知道如何才能使图像只为用户生成一次，然后将图像缓存在浏览器中。我的目标是节省服务器资源。

我的想象代码看起来还好吗？我担心我可能会遇到某种内存泄漏。谢谢你的帮助

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作为更严格的答案在JavaScript中尝试localStorage（第一次使用php处理它并使用JavaScript来决定何时要求新图像）。

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