canvas实现海报两张图片合成一张并且可以保存

最新推荐文章于 2023-07-03 17:55:07 发布

twinkle||cll

最新推荐文章于 2023-07-03 17:55:07 发布

阅读量1.2k

点赞数 1

分类专栏： html5 工具库，demo

本文链接：https://blog.csdn.net/qq_41499782/article/details/106280509

版权

工具库，demo 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

html5

9 篇文章 0 订阅

订阅专栏

<style>
        * {
            margin: 0;
            padding: 0;
        }

        :root,
        html,
        body {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
    <img src='' alt='海报'>
<body>
</body>
<script>
    var poster = document.getElementsByTagName('img')[0];
    var canvas = document.createElement('canvas');
    canvas.height = 600;
    canvas.width = 350;
    var context = canvas.getContext("2d");
    var img = new Image();
    // 因为图片加载的请求是异步的， 所以需要等图片加载回来后进行对应的操作
    img.onload = function () {
        context.drawImage(img, 0, 0, 350, 600);
    }
    img.src = "./img/poster.jpg";
    // 创建一个二维码的img
    var qrcodeImg = new Image();
    qrcodeImg.onload = function(){
        context.drawImage(qrcodeImg, 250, 500, 50, 50);
        poster.src = canvas.toDataURL("image/jpeg", 1.0);
    }
    qrcodeImg.src = "./img/qrcode.png";
   
</script>

在这里插入图片描述

twinkle||cll

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas实现海报两张图片合成一张并且可以保存

<style> * { margin: 0; padding: 0; } :root, html, body { height: 100vh; width: 100vw; } </style></head> <img src='' alt='海报'>
复制链接

扫一扫