2

I am using a custom product tool that is built around Fabric.js (FancyProductDesigner) I have needed to recreate what I made with Fabric.js (Views are stored in a database table), and re-make it using imagick for printing / previewing purposes by the factory, without needing to store each of the high definition images on the server. Since we make about 400 of these custom products on average a day, if I stored each one it would be about 160Mb a day of space to store them, and we want to store them for our customers for a minimum of 90 days after the purchase.

I have managed to recreate the entirety of the product, using PHP / Imagick, except for one thing, if someone adds text to the page, with an angle, the angle is not working with the x/y coordinates passed by Fabric.js, I have tried to work with the originX/originY settings and it doesn't seem to have any affect.

Below is the code:

$print = new Imagick();
$print->setResolution(72, 72);
$print->newImage(894, 765, new ImagickPixel('#ffffff'));
foreach ($printData[0]->elements as $i => $object) {
  if($object->type == 'image'){
    $img = $object->source;
    $src = new Imagick($img);

    $size = $src->getImageGeometry();

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

    if($object->parameters->flipX){
        $src->flopImage();
    }

    if($object->parameters->flipY){
        $src->flipImage();
    }

    if($object->parameters->angle > 0){
      $src->rotateImage(new ImagickPixel('transparent'), $object->parameters->angle);
      $sizeAfterRotate = $src->getImageGeometry();
    }

    if($object->parameters->fill != ''){
      $color = new ImagickPixel($object->parameters->fill);

      $opacityColor = new ImagickPixel("rgba(0, 0, 0, 1)");
      $src->colorizeImage($color, $opacityColor);
    }


    $src->evaluateImage(Imagick::EVALUATE_MULTIPLY, $object->parameters->opacity, Imagick::CHANNEL_ALPHA);

    $left = $object->parameters->left;
    $top = $object->parameters->top; 

    $left= ($left-($resizeWidth/2));
    $top = ($top-($resizeHeight/2));

    $print->compositeImage($src, Imagick::COMPOSITE_DEFAULT, $left, $top);
  } else {
    $draw = new ImagickDraw();
    $color = new ImagickPixel($object->parameters->fill);
    $foundFont = false;
    foreach($fonts as $name => $file){
        if($name == $object->parameters->fontFamily){
          $draw->setFont('fonts/custom/ttf/'.$file);
        $foundFont = true;
        continue;
      }
    }
    if(!$foundFont) $draw->setFont('fonts/'.$object->parameters->fontFamily.'.ttf');

    $draw->setFontSize($object->parameters->fontSize);
    //$draw->setFontSize(32);
    $draw->setFontWeight(($object->parameters->fontWeight == 'bold') ? 600 : 100 );
    $draw->setFontStyle(0);
    $draw->setFillColor($color);
    $draw->setStrokeAntialias(true);
    $draw->setTextAntialias(true);
    //$draw->setGravity(Imagick::GRAVITY_CENTER);
    $draw->setTextAlignment(Imagick::ALIGN_CENTER);


    if($object->parameters->stroke){
      $draw->setStrokeColor($object->parameters->stroke);
      $draw->setStrokeWidth($object->parameters->strokeWidth);
      $draw->setStrokeAntialias(true);  //try with and without
    }

    $metrics = $print->queryFontMetrics($draw, $object->parameters->text);

    $realleft = round($object->parameters->left);
    $realtop = round($object->parameters->top);

    $top = $realtop;
    $left = $realleft;

    $print2 = new Imagick();
    $print2->setResolution(72, 72);

    $print2->newImage(894, 765, new ImagickPixel('#00000000'));
    $print2->setImageVirtualPixelMethod( imagick::VIRTUALPIXELMETHOD_BACKGROUND );

    $print2->annotateImage($draw, $left, $top, $object->parameters->angle, $object->parameters->text);

    if($object->parameters->flipX == 1) $print2->flopImage(); // x
    if($object->parameters->flipY == 1) $print2->flipImage(); // y

    $print2->trimImage(0);
    $print2->setImagePage(0, 0, 0, 0); 

    $d = $print2->getImageGeometry();

    $left-=($d['width']/2);
    $top-=($d['height']/2);

    $print->compositeImage($print2, Imagick::COMPOSITE_DEFAULT, $left, $top);
  }
}

I had to add the text into an image, and then add that image to the element due to a few features that I was not able to locate for text such as flip and flop. If there is no angle on the text element, the images are perfectly recreated between Fabric.js and Imagick.

Results from Fabric.js Expectation

Results from Imagick Reality

If you look at it you can see that the rotation causes the text to be in a different location between Imagick and Fabric.js This problem is more noticeable on some fonts than others.

I could be missing something really easy, but I just can't see it and it's driving me mad. For now I have just disabled the ability to rotate text on the design tools, however that is not a perfect solution.

Just to clarify this is not a duplicate of PHP/Imagick: How to crate a large ( High Quality 300dpi ) image from JSON / array of Data ( width,height,x,y,angels) using PHP ImageMagic / Imagick, that does not address angle issues with adding text.

Community
  • 1
  • 1
Cory Evans
  • 183
  • 1
  • 9
  • Even if it's not a duplicate, I'd still recommend grabbing the SVG and using ImageMagick directly to do the conversion. That would allow you to start identifying the exact bit where your code is wrong. – Danack Nov 03 '16 at 20:48
  • I don't understand what you mean, I am using ImageMagick to do the conversion and the angle is the only part that is having problems, apparently the way ImageMagick angles text is not identical to how Fabric.js and/or Canvas does it. – Cory Evans Nov 04 '16 at 18:11
  • @CoryEvans Did you ever find a solutions for this? I have been trying to resolve the same issue with Imagick adding angled text to an image differently than fabric js does. hoping you ran across a solution at some point? – user2053040 Oct 12 '22 at 18:14

0 Answers0