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

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

JavaScript

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

使用imagick作为更严格的答案，请尝试在JavaScript中使用localStorage（让您的php第一次对其进行处理，并使用JavaScript来决定何时请求新图像）。

{}

如何缓存imagick生成的图像？

1 个答案: