Search code examples
phpimagevectorimagickcairo

Create Vector Image in PHP to Allow Upscaling


This question is slightly long, so I'll try to be clear.

On a website I co-develop, I created a drawing application that sends data about the lines drawn on the <canvas> element to the server to create an image and save it at multiple sizes, which works. There is the standard save which is saved to 320x212, with the smaller version at 240x176. However, some users on my site use a pretty antiquated device/browser for the application. It also has a smaller viewport, so the image is smaller, so server-side I'm currently multiplying the coordinates to compensate when saving the image to the standard size. But this has the side-effect of random unfilled parts of the image showing up, that were filled in on the canvas.

Example image
(source: socialcu.be)

(On the canvas for the smaller device's viewport, the entire bottom portion was green, while my method of multiplying the coordinates to compensate caused many unfilled portions to appear on the scaled-up image)

So my first question is, would making the image as a vector image, scaling it up (while still a vector), and then saving it as a raster image fix that issue?

And secondly (if the answer to the first is a yes), then what would be the best way of doing this in PHP? I've heard of Cairo, but the information on it (namely tutorials for the PHP package) is quite lacking. Optimally, is there a way to do this in Imagick, or a tutorial on how to use Cairo?


Solution

  • Cairo is definitely lacking for documentation on the PHP site, so it will be a much more difficult set to learn. I found a couple of links through Google in regard to Cairo. There is a blog post about someone's experience with it here: Getting started with Cairo

    Referenced in that post are a couple of walk-thrus by Michael Maclean.

    There are quite a few examples of drawing with imagick on the imagick website, and from the looks of the available research online with examples imagick has a better support community (for now). imagick will output a raster image though.