Canvas复制图片

_enzo

已于 2022-08-28 12:43:48 修改

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： Canvas 文章标签： canvas

于 2021-07-08 10:25:31 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/118567965

Canvas 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何利用HTML5 Canvas API进行图片复制，包括putImageData()和getImageData()方法的使用，以及Data数据、像素点数据和像素点坐标之间的转换关系。通过示例代码展示了具体的实现过程。

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

1.putImageData()

在这里插入图片描述

2.getImageData()

在这里插入图片描述

3.Data数据和像素点数据以及像素点坐标之间的关系

在这里插入图片描述

4.代码如下

复制图片

<style>
    canvas {
        margin: 0 auto;
        border: 2px solid #aaa;
        display: block; /*画布居中*/
    }
</style>
<body>
    <canvas id="cont" width="500px" height="500px">Hello Canvas</canvas>
    <script>
        var canvas = document.querySelector("#cont");
        var ctx = canvas.getContext('2d');
        //创建图片
        var img = new Image();
        
        img.src = '1.jpg';
        img.onload = function() {
            ctx.drawImage(img, 0, 0);
            //获取像素点
            var copy1 = ctx.getImageData(0, 0, 100, 100);
            console.log(copy1);
            ctx.putImageData(copy1, 0, 400);
        }
        
    </script>
</body>