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

原创于 2020-05-22 15:09:22 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

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

29 篇文章

订阅专栏

html5

9 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas元素进行图片处理，包括绘制图片到画布、调整尺寸及添加二维码。通过JavaScript操作，实现图片的实时预览与导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>