生成一张有变量的可以保存分享的图片

周健同学

于 2019-11-16 16:53:10 发布

阅读量266

点赞数

分类专栏： canvas画布文章标签： canvas 图片分享 js canvas画图 js画图

本文链接：https://blog.csdn.net/weixin_42196086/article/details/103100313

版权

canvas画布专栏收录该内容

1 篇文章 0 订阅

订阅专栏

生成一张可以分享的图片

HTML页面

<canvas id="helpcanvas" style="display: none"></canvas>
    <img src="" alt="" id="helpcanvasshow" style="width:70%">

js

<script>	
var _canvasWidth = 750;//画布宽度
        var _canvasHeight = 1334;//画布高度
        var c = document.getElementById('helpcanvas') //获取画布ID
        c.width = _canvasWidth;//画布宽度
        c.height = _canvasHeight;画布高度
        var ctx = c.getContext('2d');
        var img = new Image();//实例化一个image函数
        img.crossOrigin = "anonymous";//这是转成图片必加的一个属性
        img.src = '/vendor/pc/images/mobile/help/bg.png'; //引入第一张背景图
        //开始画图
        img.onload = function () {//加载执行函数
            ctx.drawImage(img, 0, 0, _canvasWidth, _canvasHeight);//设置背景图位置及大小
            ctx.save();
            var imgu = new Image();//实例化第二张图片函数
            var imguSrc = $('.headimgurl').text();//获取页面中用户头像的图片地址
            imgu.crossOrigin = "anonymous";//设置属性
            imgu.src = imguSrc
            imgu.onload = function () {
                var width = 100;
                var height = 100;
                var circle = {//画圆
                    x: width / 2,
                    y: height / 2,
                    r: width / 2
                }
                var imgx = 60;
                var imgy = 50;
                ctx.fillStyle = "rgba(0,0,0,0)"
                ctx.fillRect(imgx, imgy, width, height);
                ctx.save();
                ctx.beginPath();
                ctx.arc(circle.x + imgx, circle.y + imgy, circle.r, 0, Math.PI * 2, false);
                ctx.clip();
                ctx.drawImage(imgu, imgx, imgy, width, height);
                ctx.restore();
                var username = $('.nickname').text();
                ctx.font = "40px Arial,Helvetica,sans-serif";
                ctx.fillStyle = "#000";
                ctx.fillText(username, 180, 110);
                ctx.save();
                ctx.font = "34px Arial,Helvetica,sans-serif";
                ctx.textAlign = "center";
                ctx.fillText('识别二维码帮助我获得免费课程吧', 375, 200);
                
                var imgc = new Image();
                var imgcSrc = $('.qrcode').text();
                console.log(imgcSrc);
                imgc.crossOrigin = "anonymous";
                imgc.src = imgcSrc;
                imgc.onload = function () {
                    ctx.drawImage(imgc, 225, 240, 300, 300);
                    ctx.font = "30px Arial,Helvetica,sans-serif";
                    ctx.textAlign = "center";
                    ctx.fillStyle = "#666666";
                    ctx.fillText('(需要5个好友助力)', 375, 600);
                    ctx.save();
                    ctx.font = "32px Arial,Helvetica,sans-serif";
                    ctx.textAlign = "center";
                    ctx.fillStyle = "#000000";
                    ctx.fillText(username + '想要的课程', 375, 740);
                    
                    var imgt = new Image();
                    imgt.crossOrigin = "anonymous";
                    imgt.src = "/vendor/pc/images/mobile/year_members.png";
                    imgt.onload = function () {
                        ctx.drawImage(imgt, 151, 770, 448, 336);
                        ctx.save();
                        ctx.font = "36px Arial,Helvetica,sans-serif";
                        ctx.textAlign = "center";
                        ctx.fillStyle = "#000000";
                        ctx.fillText('企业九大模块落地课程工具', 375, 1160);
                        ctx.font = "30px Arial,Helvetica,sans-serif";
                        ctx.textAlign = "center";
                        ctx.fillStyle = "#000000";
                        ctx.fillText('价格：￥99.00', 375, 1250);
                        
                        var _imgSrc = c.toDataURL('image/jpg', 1);//将canvas改成图片链接
                        c.style.display = "none";
                        var helpcanvasshow = document.getElementById('helpcanvasshow') //获取img的ID
                        helpcanvasshow.setAttribute('src', _imgSrc);将canvas链接赋值给img
                    }
                }
            }
        }
    }
    //注意：如果要化多张图片一定要在上一张图片画完之后开始执行下一张图片
    </script>