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

最新推荐文章于 2022-11-07 20:00:00 发布

手把手入门

最新推荐文章于 2022-11-07 20:00:00 发布

阅读量1.7k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_16946803/article/details/108450923

版权

web前端专栏收录该内容

37 篇文章 0 订阅

订阅专栏

相关搜索：

jQuery canvas 头像海报微信二维码

jQuery canvas长按保存

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

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

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

html

<!-- html中添加 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

jquery

<!-- jquery -->
<!-- img1背景图、img2二维码、img3头像 -->
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);
            };
        }
    }

四、长按保存功能

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