如何使用PHP ImageMagic / Imagick从JSON /数据数组(宽度,高度,x,y,天使)创建大型(高质量300dpi)图像

2022-08-30 16:45:51

我使用FabricJs在Canvas上创建了一个设计(270x470),其中包含一些图片和文本,然后我通过fabricJS的canvas以JSON格式导出所有图片/文本信息。toJSON()方法,现在我需要使用Imagick在PHP中的高质量(2790x4560)图像上重新绘制该设计。

FabricJS Design

JSON data上述设计数组,其中包含所有对象的信息,如大小,位置,角度等。

{
"width": "2790",
"height": "4560",
"json_data": {
    "objects": [{
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "5",
            "top": "105",
            "width": "260",
            "height": "260",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "0",
            "opacity": "1",
            "src": "http:\\example.com/images/098f20be9fb7b66d00cb573acc771e99.JPG",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "5",
            "top": "229.5",
            "width": "260",
            "height": "11",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "0",
            "opacity": "1",
            "src": "http:\\example.com/images/aeced466089d875a7c0dc2467d179e58.png",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "51.07",
            "top": "135.58",
            "width": "260",
            "height": "11",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "47.41",
            "opacity": "1",
            "src": "http:\\example.com/images/910ce024d984b6419d708354bf3641a3.png",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "139.71",
            "top": "104.97",
            "width": "260",
            "height": "11",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "89.65",
            "opacity": "1",
            "src": "http:\\example.com/images/88e096a82e5f8a503a71233addaff64c.png",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "230.78",
            "top": "146.93",
            "width": "260",
            "height": "11",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "134.98",
            "src": "http:\\example.com/images/d2c0ec738c1fec827381cfeb600bd87d.png",
        }, {
            "type": "image",
            "originX": "left",
            "originY": "top",
            "left": "265.01",
            "top": "240.19",
            "width": "260",
            "height": "11",
            "scaleX": "1",
            "scaleY": "1",
            "angle": "179.86",
            "opacity": "1",
            "src": "http:\\example.com/images/3f0bc771261860d917e0ad6d09cb2064.png",
        }],
    "background": "#FF00FF"
}}

在这里,我的代码片段用于使用JSON数据Array在PHP中生成高质量图像

error_reporting(E_ALL | E_STRICT);

try {
  $id = $_GET['id']; // Design ID

  define('DS', DIRECTORY_SEPARATOR);

  $jsonDir = dirname(__FILE__) . DS . 'media' . DS . 'designs';
  $printData = json_decode(file_get_contents($jsonDir . DS . $id . '.json'));

  } catch (Exception $e) {
     echo $e->getMessage();
  }

try {
   $print = new Imagick();
   $print->setResolution(300, 300);
   $background = (empty($printData->json_data->background)) ? 'transparent' : $printData->json_data->background;
   $print->newImage($printData->width, $printData->height, new ImagickPixel($background));

   $print->setImageFormat('png32');
   $print->setImageUnits(imagick::RESOLUTION_PIXELSPERCENTIMETER);
} catch (Exception $e) {
   echo $e->getMessage();
}

// Re-Scaling each Image/Text for Larger Canvas/Image 
foreach ($printData->json_data->objects as $i => $object) {

   if ($object->type == 'image') {
        addImage($object, $print, $printData);
   } else {
        addText($object, $print, $printData);
   }
}


try {
   // Saving High Quality Image in (300 dpi)
   $fileDir = dirname(__FILE__) . DS . 'media' . DS . 'prints';

   if (!file_exists($fileDir) || !is_dir($fileDir)) {
       if (!mkdir($fileDir))
           die("Could not create directory: {$fileDir}\n");
   }
   $saved = $print->writeimage($fileDir . DS . $id . '.png');
   header('Content-type: image/png');
   echo $print;
 } catch (Exception $e) {
      echo $e->getMessage();
 }

addImage();

function addImage($object, $print, $printData) {

    try {
        $widthScale = ($printData->width / 270);
        $heightScale = ($printData->height / 470);
        $fileDir = dirname(__FILE__) . DS . 'media' . DS . 'original' . DS;
        $src = new Imagick($fileDir . basename($object->src));

        $size = $src->getImageGeometry();

        $resizeWidth = ($object->width * $object->scaleX) * $widthScale;
        $resizeHeight = ($object->height * $object->scaleY) * $heightScale;
        $src->resizeImage($resizeWidth, $resizeHeight, Imagick::FILTER_LANCZOS, 1);
        $sizeAfterResize = $src->getImageGeometry();

        $src->rotateImage(new ImagickPixel('none'), $object->angle);
        $sizeAfterRotate = $src->getImageGeometry();


        if (!$object->angle) {
            $left = $object->left * $widthScale;
            $top = $object->top * $heightScale;
        } else {

            switch ($object->angle) {
                case $object->angle > 315:
                    $left = ($object->left * $widthScale);
                    $top = ($object->top * $heightScale);
                    break;
                case $object->angle > 270:
                    $left = ($object->left * $widthScale);
                    $top = ($object->top * $heightScale);

                    break;
                case $object->angle > 225:
                    $left = ($object->left * $widthScale);
                    $top = ($object->top * $heightScale);
                    break;
                case $object->angle > 180:
                    $left = ($object->left * $widthScale);
                    $top = ($object->top * $heightScale);
                    break;
                case $object->angle > 135:
                    $left = ($object->left * $widthScale);
                    $top = ($object->top * $heightScale);
                    break;
                case $object->angle > 90:
                    $left = ($object->left * $heightScale) - ($sizeAfterRotate['width'] / 2);
                    $top = ($object->top * $heightScale) - ($sizeAfterRotate['width'] / 2);
                    break;
                case $object->angle > 45:
                    $left = ($object->left * $widthScale) - $size['height'] * $widthScale;
                    $top = ($object->top * $heightScale) - $size['height'] * $heightScale;
                    break;

                default:
                    $left = $object->left * $widthScale;
                    $top = $object->top * $heightScale;

                    break;
            }
        }

        $print->compositeImage($src, Imagick::COMPOSITE_DEFAULT, $left, $top);
    } catch (Exception $e) {
        echo $e->getMessage();
    }
}

我的输出结果(90%)与上述解决方案一起存在,但是正如我们所看到的,一些图像(蓝色数字线)没有放在确切的位置,这应该看起来像第一个设计图像

Imagick Design

基本上,我试图做的是,“在循环中调用add图像方法进行缩放 - 旋转 - 将每个图像定位在打印图像(300DPi)上

我不确定我错过了什么来获得精确的偏移(新的x,y坐标/位置/左上)后旋转图像在Imagick或我正在旋转对象后缩放然后组成

或者可能是像Math.PI这样的数学公式:)

问题是如何根据缩放后的旋转度/角度计算新的偏移/位置?

我希望发布的片段对每个人都有用。


答案 1

这不是一个完整的答案,但你完全错了。

Fabric.js已经有一种方法可以使用 canvas.toSVG() 函数将画布保存为 SVG 格式。Imagick可以打开SVG文件,并以您想要的任何质量将其转换为PNG。

尝试包含图像中包含的位图时会出现问题,例如

"src": "http:\\example.com/images/3f0bc771261860d917e0ad6d09cb2064.png",

我强烈建议自己在服务器上下载这些内容,而不是让Imagick下载它们。这不仅可以让您更好地控制可能发生的任何错误,还可以限制一些安全风险。允许人们从服务器内部下载任意数据,然后让具有许多内存访问错误的库使用这些数据不是一个好主意。

执行此操作的一般方法是在 fabric.js 创建 SVG 之前,将图像的 src 替换为对本地文件名的引用,或者在转换后更黑客化地执行此操作 - 当您进行此替换时,会生成需要从远程服务器下载的文件列表。

实际的实现细节留给OP作为练习。

顺便说一句,有一个合理的机会有人已经这样做了....你有没有彻底搜索过packagist/github?


答案 2

认为我得到了你正在寻找的东西,会让你有一个函数,几年前使用从JSON字符串生成高质量的图像。但是,您必须进行必要的更改。我的输出扩展是 tiff。和 json 字符串是使用 1% 调整大小的 png 版本,稍后我缩放 s, y 值以采用 100% 全尺寸 psd。

function generateDesignImage($arr_params,$arr_design){
    extract($arr_params);
    $images     = $arr_design['sprites'];
    $dir        = $arr_design['options']['source_dir'];
    $ext    = $arr_design['options']['in_ext'];
    $side   = $arr_design['options']['img_side'];
    $out_ext = $arr_design['options']['out_ext'];

    // Canvas   
    $im = new Imagick();
    $im->newImage(6000,6000,'transparent');
    $im->setImageColorSpace(Imagick::COLORSPACE_CMYK);
    //$im->setImageDepth(8);
    /********************* Code for image arrangements *************************/
    $i      =0;
    $min_X  = $min_Y    = 6000;
    $max_X  = $max_Y    = 0;
    $scale  = 10;
    foreach($images as $sprites=>$val){
        $var        =   "img_$i";
        $var    = new Imagick();
        $var->resizeImage($var->getImageWidth()/$scale,$var->getImageHeight()/$scale,Imagick::FILTER_LANCZOS,1,TRUE);
        /************ Find out x,y,width and height *********************/
        $c_width    = $var->getImageWidth()/2;
        $c_height   = $var->getImageHeight()/2;
        $x1     = ($val['x']*$scale/$val['scale'])-$c_width;
        $y1         = ($val['y']*$scale/$val['scale'])-$c_height;
        $x2     = ($val['x']*$scale/$val['scale'])+$c_width;
        $y2     = ($val['y']*$scale/$val['scale'])+$c_height;
        $min_X  = ($min_X >= $x1)?$x1:$min_X;
        $min_Y  = ($min_Y >= $y1)?$y1:$min_Y;
        $max_X  = ($max_X <= $x2)?$x2:$max_X;
        $max_Y  = ($max_Y <= $y2)?$y2:$max_Y;
        /***************************************************************/

        $im->compositeImage($var, $var->getImageCompose(), $x1,$y1,imagick::MONTAGEMODE_FRAME);
        $i++;
    }
    /**************************************************************************/    
        $im->setImageFormat( $out_ext );    
        /******************Crop to Exact Fit ********************************/
    $im->cropImage ( $max_X-$min_X+100,$max_Y-$min_Y+100  ,$min_X-50  ,$min_Y-50 );
        /************************************************************************/
    $success1 = $im->writeImage( 'Out_image_'.$design_id.'.'.$out_ext);
    $var->BorderImage(new ImagickPixel("white") , 5,5);
    return $success1;
}

推荐