PHP生成海报（PHP把图片转为base64）

最近遇到一个生成海报的需求(有微信头像，二维码)，一开始是用GD,但是特别慢。然后用canvas,结果遇到跨域。之后想到把图片
转为base64，在用canvas。

PHP代码：

//用PHP把图片转为base64
$url='图片url';
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER,true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION,true);
curl_setopt($curl, CURLOPT_ENCODING, 'gzip');
$data = curl_exec($curl);
$code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
curl_close($curl);
if ($code == 200){
    $imgBase64Code = "data:image/jpeg;base64," . base64_encode($data);
    echo  '<img src="'.$imgBase64Code.'">';
    //$headImg=$imgBase64Code;
}

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分享海报</title>
    <script>
        var canvas = document.createElement("canvas");
        canvas.width = 750;
        canvas.height = 1334;
        var context = canvas.getContext("2d");

        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#fff";
        context.fill();

        var myImage = new Image();
        myImage.crossOrigin = 'anonymous';
        myImage.src = "海报模板url";
        myImage.onload = function () {
            context.drawImage(myImage, 0, 0, 750, 1334);

            context.font = "32px Courier New";
            context.fillText("插入的文字", 75, 450);

            var myImage1 = new Image();
            myImage1.crossOrigin = 'anonymous';
            myImage1.setAttribute('crossorigin', 'anonymous');
            myImage1.src = "二维码图片，base64";

            myImage1.onload = function () {
                context.drawImage(myImage1, 160, 700, 430, 430);
                //H绘制圆形头像
                var canvas_head = document.createElement("canvas");
                canvas_head.width = 200;
                canvas_head.height = 200;
                var ctx = canvas_head.getContext('2d');
                ctx.beginPath();
                ctx.arc(100, 100, 100, 0, Math.PI * 2, true);
                ctx.clip();
                ctx.fillRect(0, 0, 200, 200);
                var myImage2 = new Image();
                myImage2.crossOrigin = 'anonymous';
//                myImage2.setAttribute('crossorigin', 'anonymous');
                myImage2.src = '头像图片，base64';
                myImage2.onload = function () {
                    ctx.drawImage(myImage2,0, 0, 200, 200);
                    var img1=document.createElement("img");
                    img1.crossOrigin = 'anonymous';
//                    img1.setAttribute('crossorigin', 'anonymous');
                    var base64 = canvas_head.toDataURL("image/png");
                    img1.setAttribute('src',base64);
                    img1.onload = function () {
                        context.drawImage(img1, 275, 175, 200, 200);
                        var base64 = canvas.toDataURL("image/png");
                        var img = document.getElementById('avatar_img');
//                        img.setAttribute('crossorigin', 'anonymous');
                        img.crossOrigin = 'anonymous';
                        img.setAttribute('src', base64);
                        console.log(base64)
                    }

                }
            }
        };
    </script>
</head>
<body>
   <img id="avatar_img" src="" width="100%" height="100%">
</body>

PHP生成海报（PHP把图片转为base64）

猜你喜欢