canvas 将两张图片叠加

最新推荐文章于 2023-10-22 16:56:56 发布

前端整理大师

最新推荐文章于 2023-10-22 16:56:56 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： html javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_57482145/article/details/129750402

本文介绍了如何使用HTML5的canvas元素进行图像处理。首先创建canvas元素，然后通过getContext(2d)获取2D渲染上下文。接着，利用newImage()创建图像元素并加载图片，在图片加载完成后调整canvas尺寸并绘制背景及前景图像。最后，通过canvas.toDataURL(image/png)方法将canvas内容转换为base64格式的PNG图片。

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

创建一个 canvas 元素

<canvas id="canvas"></canvas>

获取 canvas 元素

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

 const canvas = document.querySelector('#canvas')
 const ctx = canvas.getContext('2d')

通过 new Image() 创建一个图像元素

 var myImg = new Image();
 myImg.src = './images/code.png';
 var bgImg = new Image();
 bgImg.src = './images/bg.png';

在图像加载成功后进行绘画

bgImg.onload = function () {
            // this.width 和 this.height 获取到的是当前图片的宽和高
            document.getElementById("canvas").width = this.width;
            document.getElementById("canvas").height = this.height;
            ctx.drawImage(bgImg, 0, 0, this.width, this.height)
            ctx.drawImage(myImg, this.width - 500, 300, 200, 200)
}

通过 canvas.toDataURL("image/png") 方法将 canvas 画完的图片转为 base64 文件格式获取图片

canvas.toDataURL("image/png")

<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.querySelector('#canvas')
        const ctx = canvas.getContext('2d')
        // 画图
        var myImg = new Image();
        myImg.src = './images/code.png';
        var bgImg = new Image();
        bgImg.src = './images/bg.png';

        bgImg.onload = function () {
            document.getElementById("canvas").width = this.width;
            document.getElementById("canvas").height = this.height;
            //  ctx.drawImage(图片, x轴, y轴, 绘制图片的宽, 绘制图片的高)
            ctx.drawImage(bgImg, 0, 0, this.width, this.height)
            ctx.drawImage(myImg, this.width - 500, 300, 200, 200)
        }
        canvas.toDataURL("image/png")
    </script>
</body>