SVG & ImageMagick 图文合成的进阶解决方案

最新推荐文章于 2024-01-21 16:53:00 发布

羽化半径

最新推荐文章于 2024-01-21 16:53:00 发布

阅读量718

点赞数

分类专栏： magento PHP 文章标签： ImageMagick

本文链接：https://blog.csdn.net/weixin_44567104/article/details/103425363

版权

magento 同时被 2 个专栏收录

43 篇文章 1 订阅

订阅专栏

PHP

3 篇文章 0 订阅

订阅专栏

之前折腾了一下Canvas、SVG、PHP GD之间的一些破问题但是最终放到真实环境效果不尽人意。

缺点如下：

1、前文里面最终采用的是svg转canvas再转成base64图片数据流回传到服务器合成图片，图片里面有自定义字体的文字，所以svg里面塞进去了一个字体文件，最终回传的图片数据其实也不小，如果多几个图层其实要卡出翔，手机上那效率就不说了；

2、兼容问题，svg转换canvas在IE下基本都会因为什么安全问题失败、手机上也支持得不是很好；

那么在有限的资源下只能选择吧大部分工作放到服务器上会避免很多兼容问题。当然相对的就是牺牲了服务器的资源；废话不多说开始骚操作：

一、安装ImageMagick库

在服务端获取到前端传回的svg图层html数据，并转换大致代码如下：

$svgName = $i.'_'.$svgName;
$fname = $i.'_'.$fname;
$svgfile = $svg_upload_dir . $svgName;

$success = file_put_contents($svgfile, $c_s_str);//把数据流学成svg文件

$im = new Imagick();
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no" ? >'.file_get_contents($svgfile); //这里必须这样写否则Imagick不认识你的文件

$im->setBackgroundColor(new ImagickPixel('transparent'));//背景透明
$im->readImageBlob($svg);
$im->setImageFormat("png24");
$im->resizeImage(500, 500, imagick::FILTER_LANCZOS, 1);//Resize

$im->writeImage(Mage::getBaseDir('media').'/tmp/tmp/'.$fname); //写入图片

这里有2个坑点：

1、必须添加“<?xml version="1.0"”头且版本必须为1.0否则无法转换；

2、把SVG通过ImageMagick转成图片发现里面的文字不见了；解法见二

3、文字出现了但是字体没有带过来；

二、安装inkscape扩展