TaoSql Admin自主研发的在线图片合成接口

API接口

前端调用需要把ip地址改为您服务器的域名，后端如是同一台服务器下可不用修改

接口地址：http://127.0.0.1/taosql/api/canvas.php
返回格式：json
请求方式：get/post

请求参数

参数	类型	是否必填	描述	示例值
width	Number	是	画布宽度	750
height	Number	是	画布高度	1000
bgcolor	String	是	画布背景色	rgb(255,255,0)
type	String	是	画布生成图片格式	png
json	Boolean	否	是否返回json格式数据	true
data	Array	是	图片组件	见下文

参数各项可选值表

参数	可选值	描述
bgcolor	rgb(0,0,0)	选择rgb格式渲染画布背景
	留空	选用默认白色背景
type	png	生成png格式图片
	jpg	生成jpg格式图片
	gif	生成gif格式图片
json	true	返回json格式数据流
	false	返回图片流

data支持的组件
data支持数组格式的json数据

{...},{...},{...},{...}...

组件列表

图片

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为img为图片	img
src	String	是	图片url	images/1.jpg
width	Number	是	图片宽度	200
height	Number	是	图片高度	300
left	Number	是	图片距画布左边距离（像素）	100
top	Number	是	图片距画布顶部距离（像素）	100

json格式：

{
    type: "img",
    src: "images/1.jpg",
    width: 200,
    height: 300,
    left: 100,
    top: 100
}

填充矩形

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为rectfill为填充矩形	rectfill
width	Number	是	填充矩形的宽度	200
height	Number	是	填充矩形的高度	300
left	Number	是	填充矩形距画布左边距离（像素）	100
top	Number	是	填充矩形距画布顶部距离（像素）	100
bgcolor	String	是	填充矩形背景色	rgb(255,255,0)

json格式：

{
    type: "rectfill",
  width: 200,
    height: 300,
    left: 100,
    top: 100,
  bgcolor: "rgb(255, 255, 0)"
}

空心矩形

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为rect为空心矩形	rect
color	String	是	边框颜色	rgb(255,255,0)
width	Number	是	空心矩形宽度	200
height	Number	是	空心矩形高度	300
left	Number	是	空心矩形距画布左边距离（像素）	100
top	Number	是	空心矩形距画布顶部距离（像素）	100

json格式：

{
    type: "rect",
    color: "rgb(255, 255, 0)",
    width: 200,
    height: 300,
  left: 100,
    top: 100
}

文本

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为text为填充矩形	text
value	String	是	文本	扫一扫
color	String	是	文本颜色	rgb(255,255,20)
size	Number	是	文字大小（像素）	16
left	Number	是	文字距画布左边距离（像素）	100
top	Number	是	文字距画布顶部距离（像素）	100
deg	Number	是	文字旋转角度	0
font	String	是	文字所用字体绝对位置	c:/windows/fonts/simhei.ttf
center	Boolean	否	是否居中于画布	true

json格式：

{
    type: "text",
    value: "扫一扫",
    color: "rgb(255,255,20)",
    size: 16,
    left: 100,
    top: 100,
    deg: 0,
    font: "c:/windows/fonts/simhei.ttf",
    center: true
}

线条

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为line为空心矩形	line
color	String	是	线条颜色	rgb(255,255,0)
x1	Number	是	线条起点的横坐标（像素）	400
y1	Number	是	线条起点的纵坐标（像素）	0
x2	Number	是	线条终点的横坐标（像素）	0
y2	Number	是	线条终点的纵坐标（像素）	60
size	Number	是	线条粗细（像素）	2

json格式：

{
    type: "line",
    color: "rgb(255, 255, 0)",
    x1: 400,
    y1: 0,
    x2: 0,
    y2: 600,
    size: 2
}

填充圆

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为ellipsefill为填充圆	ellipsefill
width	Number	是	填充圆的宽度	200
height	Number	是	填充圆的高度	300
left	Number	是	填充圆距画布左边距离（像素）	100
top	Number	是	填充圆距画布顶部距离（像素）	100
bgcolor	String	是	填充圆背景色	rgb(255,10,10)

json格式：

{
    type: "ellipsefill",
  width: 200,
    height: 300,
    left: 100,
    top: 100,
    bgcolor: "rgb(255, 10, 10)"
}

空心圆

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为ellipse为空心矩形	ellipse
color	String	是	边框颜色	rgb(255,150,0)
width	Number	是	空心圆宽度	200
height	Number	是	空心圆高度	300
left	Number	是	空心圆距画布左边距离（像素）	100
top	Number	是	空心圆距画布顶部距离（像素）	100

json格式：

{
    type: "ellipse",
    color: "rgb(255, 255, 255)",
    width: 110,
    height: 110,
    left: 45,
    top: 20
}

二维码

参数	类型	是否必填	描述	示例值
type	String	是	组件格式值为qrcode为空心矩形	qrcode
value	String	是	二维码文本	https://www.baidu.com
width	Number	是	二维码宽度	300
height	Number	是	二维码高度	300
left	Number	是	二维码距画布左边距离（像素）	100
top	Number	是	二维码距画布顶部距离（像素）	100

json格式：

{
    type: "qrcode",
    value: "https://www.baidu.com",
    width: 300,
    height: 300,
    left: 100,
    top: 100
}

http请求示例

http://127.0.0.1/taosql/api/canvas.php?data%5B0%5D%5Btype%5D=img&data%5B0%5D%5Bsrc%5D=http%3A%2F%2Fb.zol-img.com.cn%2Fsjbizhi%2Fimages%2F12%2F750x1334%2F161663552434.jpg&data%5B0%5D%5Bwidth%5D=400&data%5B0%5D%5Bheight%5D=600&data%5B0%5D%5Bleft%5D=0&data%5B0%5D%5Btop%5D=0&data%5B1%5D%5Btype%5D=rectfill&data%5B1%5D%5Bbgcolor%5D=rgb(255%2C+255%2C+255)&data%5B1%5D%5Bleft%5D=280&data%5B1%5D%5Btop%5D=550&data%5B1%5D%5Bwidth%5D=100&data%5B1%5D%5Bheight%5D=30&data%5B2%5D%5Btype%5D=text&data%5B2%5D%5Bvalue%5D=%E5%BE%AE%E4%BF%A1%E6%89%AB%E4%B8%80%E6%89%AB&data%5B2%5D%5Bcolor%5D=rgb(0%2C+0%2C+0)&data%5B2%5D%5Bsize%5D=12&data%5B2%5D%5Bleft%5D=290&data%5B2%5D%5Btop%5D=573&data%5B2%5D%5Bdeg%5D=0&data%5B2%5D%5Bfont%5D=c%3A%2Fwindows%2Ffonts%2Fsimhei.ttf&data%5B3%5D%5Btype%5D=rect&data%5B3%5D%5Bcolor%5D=rgb(255%2C+255%2C+255)&data%5B3%5D%5Bleft%5D=275&data%5B3%5D%5Btop%5D=435&data%5B3%5D%5Bwidth%5D=110&data%5B3%5D%5Bheight%5D=110&data%5B4%5D%5Btype%5D=line&data%5B4%5D%5Bcolor%5D=rgb(255%2C+255%2C+255)&data%5B4%5D%5Bx1%5D=400&data%5B4%5D%5By1%5D=0&data%5B4%5D%5Bx2%5D=0&data%5B4%5D%5By2%5D=600&data%5B4%5D%5Bsize%5D=1&data%5B5%5D%5Btype%5D=ellipsefill&data%5B5%5D%5Bbgcolor%5D=rgb(85%2C+85%2C+255)&data%5B5%5D%5Bleft%5D=75&data%5B5%5D%5Btop%5D=50&data%5B5%5D%5Bwidth%5D=50&data%5B5%5D%5Bheight%5D=50&data%5B6%5D%5Btype%5D=ellipse&data%5B6%5D%5Bcolor%5D=rgb(255%2C+255%2C+255)&data%5B6%5D%5Bleft%5D=45&data%5B6%5D%5Btop%5D=20&data%5B6%5D%5Bwidth%5D=110&data%5B6%5D%5Bheight%5D=110&data%5B7%5D%5Btype%5D=qrcode&data%5B7%5D%5Bvalue%5D=http%3A%2F%2F20ps.cn%2F&data%5B7%5D%5Bwidth%5D=100&data%5B7%5D%5Bheight%5D=100&data%5B7%5D%5Bleft%5D=280&data%5B7%5D%5Btop%5D=440&width=400&height=600&bgcolor=rgb(0%2C+0%2C+0)&type=png&json=true

JavaScript请求示例

<html>
    <head>
        <meta charset="utf-8">
        <title>图片合成案例</title>
        <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" />
        <script src="https://www.layuicdn.com/layui/layui.js"></script>
    </head>
    <body>
        <img id="img" />
        <script>
            layui.use(function() {
                var $ = layui.$;
                var arr = [{
                        type: "img",
                        src: "http://b.zol-img.com.cn/sjbizhi/images/12/750x1334/161663552434.jpg",
                        width: 400,
                        height: 600,
                        left: 0,
                        top: 0
                    },
                    //背景图片
                    {
                        type: "rectfill",
                        bgcolor: "rgb(255, 255, 255)",
                        left: 280,
                        top: 550,
                        width: 100,
                        height: 30
                    },
                    //填充矩形
                    {
                        type: "text",
                        value: "微信扫一扫",
                        color: "rgb(0, 0, 0)",
                        size: 12,
                        //文字大小
                        left: 290,
                        top: 573,
                        deg: 0,
                        //旋转角度
                        font: "c:/windows/fonts/simhei.ttf",
                        //字体位置
                        //center: true
                    },
                    //文本
                    {
                        type: "rect",
                        color: "rgb(255, 255, 255)",
                        left: 275,
                        top: 435,
                        width: 110,
                        height: 110
                    },
                    //空心矩形
                    {
                        type: "line",
                        color: "rgb(255, 255, 255)",
                        x1: 400,
                        y1: 0,
                        x2: 0,
                        y2: 600,
                        size: 1
                    },
                    //直线
                    {
                        type: "ellipsefill",
                        bgcolor: "rgb(85, 85, 255)",
                        left: 75,
                        top: 50,
                        width: 50,
                        height: 50
                    },
                    //实心圆
                    {
                        type: "ellipse",
                        color: "rgb(255, 255, 255)",
                        left: 45,
                        top: 20,
                        width: 110,
                        height: 110
                    }, //空心圆
                    {
                        type: "qrcode",
                        value: "二维码内容",
                        width: 100,
                        height: 100,
                        left: 280,
                        top: 440
                    } //二维码
                ];
                var obj = {
                    width: 400,
                    height: 600,
                    bgcolor: "rgb(0, 0, 0)",
                    //背景色 如透明请留空""
                    type: "png", //png|jpg|gif
                    json: true, //json = false 直接返回图片不返回json
          data: arr
                };
                $.ajax({
                    url: "http://127.0.0.1/taosql/api/canvas.php",
                    type: "GET",
                    dataType: "json",
                    data: obj,
                    success: function(data) {
                        layer.msg(data.code, {
                            icon: data.icon
                        });
                        if (data.icon == "1") {
                            $("#img").attr("src", data.data.base64);
                        } else {
                            $("#img").attr("src", "../images/file.png");
                        }
                    },
                    error: function(data) {
                        layer.msg('参数有误或者返回的是图片');
                        $(".load").html("");
                        $("#img").attr("src", "../images/file.png");
                    }
                });
            });
        </script>
    </body>
</html>

PHP请求示例

<?php
header("Content-type:text/html;charset=utf-8");
$url = "http://127.0.0.1/taosql/api/canvas.php";
$item = [
    [
        "type"=> "img",
        "src"=> "http://b.zol-img.com.cn/sjbizhi/images/12/750x1334/161663552434.jpg",
        "width"=> 400,
        "height"=> 600,
        "left"=> 0,
        "top"=> 0
    ],
    [
        "type"=> "rectfill",
        "bgcolor"=> "rgb(255, 255, 255)",
        "left"=> 280,
        "top"=> 550,
        "width"=> 100,
        "height"=> 30
    ],
    [
        "type"=> "text",
        "value"=> "微信扫一扫",
        "color"=> "rgb(0, 0, 0)",
        "size"=> 12,
        "left"=> 290,
        "top"=> 573,
        "deg"=> 0,
        "font"=> "c:/windows/fonts/simhei.ttf",
        "center"=>false
    ],
    [
        "type"=> "rect",
        "color"=> "rgb(255, 255, 255)",
        "left"=> 275,
        "top"=> 435,
        "width"=> 110,
        "height"=> 110
    ],
    [
        "type"=> "line",
        "color"=> "rgb(255, 255, 255)",
        "x1"=> 400,
        "y1"=> 0,
        "x2"=> 0,
        "y2"=> 600,
        "size"=> 1
    ],
    [
        "type"=> "ellipsefill",
        "bgcolor"=> "rgb(85, 85, 255)",
        "left"=> 75,
        "top"=> 50,
        "width"=> 50,
        "height"=> 50
    ],
    [
        "type"=> "ellipse",
        "color"=> "rgb(255, 255, 255)",
        "left"=> 45,
        "top"=> 20,
        "width"=> 110,
        "height"=> 110
    ],
    [
        "type"=> "qrcode",
        "value"=> "二维码文本",
        "width"=> 100,
        "height"=> 100,
        "left"=> 280,
        "top"=> 440
    ]
];
$data = [
    "width"=>400,
    "height"=>600,
    "bgcolor"=>"rgb(0, 0, 0)",
    "type"=>"png",
    "json"=>true,
    "data"=>$item
];
$res = curl($url, $data);
$json = json_decode($res, true);
$base64 = $json["data"]["base64"];
exit("<img src='{$base64}' />");
function curl($u, $d=[], $h=[])
{
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $u);
    curl_setopt($curl, CURLOPT_HEADER, 0);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_TIMEOUT, 1000);
    curl_setopt($curl, CURLOPT_HTTPHEADER, $h);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, http_build_query($d));
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($curl, CURLOPT_MAXREDIRS, 10);
    curl_setopt($curl, CURLOPT_AUTOREFERER, 1);
    $data = curl_exec($curl);
    if (curl_error($curl)) {
        exit("无法发起POST请求");
    }
    curl_close($curl);
    return $data;
}

响应参数

参数	类型	描述	状态码	状态码说明
icon	String	状态码	1	图片合成成功
			5	参数不全或者有误
code	String	文本描述	-	-
data	Array	爬取的结果	-	-

响应参数`data`参数分解

参数	类型	描述
base64	String	生成的图片base64代码
data	Object	前端发送给后端的POST参数

响应示例

{
    "code": "图片生成成功",
    "icon": "1",
    "data": [
    "base64"=>...,
    "data"=>...
  ]
}

图片合成

API接口

请求参数

组件列表

图片

填充矩形

空心矩形

文本

线条

填充圆

空心圆

二维码

http请求示例

JavaScript请求示例

PHP请求示例

响应参数

响应参数data参数分解

响应示例

响应参数`data`参数分解