jQuery+canvas 生成海报（二维码+头像+背景图）

太过爱你忘了你带给我的痛 2022-12-04 09:14 313阅读 0赞

相关搜索：

jQuery canvas 头像海报微信二维码

jQuery canvas长按保存

一、背景：因为之前同事用java后端生成海报，导致海报加载缓慢，所以把它放到前端来拼接

二、菜鸟教程：[https://www.runoob.com/html/html5-canvas.html][https_www.runoob.com_html_html5-canvas.html]

三、准备好需要的材料（图片）

html

<canvas id="myCanvas" width="200" height="100"></canvas>

jquery

function drawAndShareImage(img1, img2, img3){
            var canvas=document.getElementById("myCanvas");
            //var canvas = document.createElement("myCanvas");
            canvas.width = 700;
            canvas.height = 700;
            var context = canvas.getContext("2d");
            context.rect(0 , 0 , canvas.width , canvas.height);
            context.fillStyle = "#fff";
            context.fill();
            var myImage = new Image();
            myImage.src = img1;  //背景图片 你自己本地的图片或者在线图片
            myImage.crossOrigin = 'Anonymous';
            myImage.onload = function(){
                context.drawImage(myImage , 0 , 0 , 500 , 500);
                context.font = "60px Courier New";
                context.fillText("我是文字",500,500);
                var myImage2 = new Image();
                myImage2.src = img2;  //你自己本地的图片或者在线图片
                myImage2.crossOrigin = 'Anonymous';
                myImage2.onload = function(){
                    context.drawImage(myImage2 , 175 , 175 , 225 , 225);
                    var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                    var img = document.getElementById('myCanvas');
                    // document.getElementById('avatar').src = base64;
                    img.setAttribute('src' , base64);
                }
    
                var myImage3 = new Image();
                myImage3.src = img3;  //你自己本地的图片或者在线图片
                myImage3.crossOrigin = 'Anonymous';
                myImage3.onload = function(){
                    context.drawImage(myImage3 , 0 , 0 , 180 , 180);
                    var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
                    var img = document.getElementById('myCanvas');
                    // document.getElementById('avatar').src = base64;
                    img.setAttribute('src' , base64);
                };
            }
        }

四、长按保存功能

五、解决图片异步嵌套问题

[https_www.runoob.com_html_html5-canvas.html]: https://www.runoob.com/html/html5-canvas.html