Add svg path on image using vips

429 Views Asked by At

I am using vips PHP library. I want to add svg path on my image. I implemented below code for that but it's not giving me expected output. The problem is how can I set svg path according to the actual image height & width. I tried using resize and thumbnail but it doesn't give me expected output. Also I want to fill the grey color on my actual image blocks like in expected output image.

The expected output image generated using imagick

$background = Vips\Image::newFromFile($arg[1], ['access' => 'sequential']);
$svg = Vips\Image::svgload_buffer('<svg>
  <path 
    d="M0 200 v-200 h200 
    a100,100 90 0,1 0,200
    a100,100 90 0,1 -200,0
    z" stroke="#fff" fill="transparent"/>
</svg>');
// $svg = $svg->resize(2.5);
$svg = $svg->thumbnail_image(700, ['height' => 700, 'size' => 'both']);
$image = $background->composite($svg, 'dest-in');
$image->writeToFile([$arg2], ['background' => [128, 128, 128], 'Q' => 100]);

Below is the image on which I added my svg path enter image description here

My vips output image enter image description here

Expected output image enter image description here

1

There are 1 best solutions below

1
On

Try:

#!/usr/bin/php
<?php

require __DIR__ . '/vendor/autoload.php';
use Jcupitt\Vips;

$background = Vips\Image::newFromFile($argv[1], ['access' => 'sequential']);
$width = $background->width;
$height = $background->height;
$svg = Vips\Image::svgload_buffer(<<<EOF
  <svg
    viewBox="0 0 300 300" 
    width="$width"
    height="$height">
    <path 
    d="M0 200 v-200 h200 
      a100,100 90 0,1 0,200
      a100,100 90 0,1 -200,0
      z" stroke="#fff" fill="white"/>
  </svg>
EOF);
$image = $background->colourspace('b-w')->composite($svg, 'dest-in');
$image->writeToFile($argv[2], ['background' => [128, 128, 128], 'Q' => 100]);

Associated github issue: https://github.com/libvips/php-vips/issues/109