【问题标题】:Render fabric.js canvas json data to image file using ImageMagick使用 ImageMagick 将 fabric.js 画布 json 数据渲染到图像文件
【发布时间】:2015-02-01 18:39:35
【问题描述】:

我知道可以获取canvas客户端的图片dataURL,甚至可以使用Node.js将canvas渲染成图片文件。

不过,我正在处理分辨率约为 9000x9000 及以上的图像,而上述方法对于这种尺寸的图像来说速度很慢/不可靠。

是否可以将我从 fabric.js 获取的 JSON 数据读取到 PHP 中,并使用 ImageMagick 之类的图形库将其呈现在服务器端?

干杯

【问题讨论】:

标签: javascript imagemagick fabricjs


【解决方案1】:

将您的 JSON 数据导出到文件或直接读取 然后使用 Imagick 创建一个更大的图像

   $print = new Imagick();
   $print->setResolution(300, 300);
   $background = #ff00ff;
   $print->newImage(9000, 9000, new ImagickPixel($background));

   $print->setImageFormat('png32');
   $print->setImageUnits(imagick::RESOLUTION_PIXELSPERCENTIMETER);

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

        addImage($object, $print, $printData);

  }


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

    $widthScale = ($printData->width / 300); fabric canvas width
    $heightScale = ($printData->height / 500); fabric canvas height
    $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();

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

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

}



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

【讨论】:

  • 谢谢!是否有能力对文本做同样的事情?像处理图像一样缩放字体?
  • 你有没有在你的设计中使用过 svg 图片?如果是,您是如何管理 svg 路径以绘制图像的?
猜你喜欢
  • 2018-05-05
  • 1970-01-01
  • 2014-03-10
  • 2012-12-06
  • 1970-01-01
  • 2016-08-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多