基于canvas实现涂鸦清除保存功能

最新推荐文章于 2024-08-06 15:14:13 发布

(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ

最新推荐文章于 2024-08-06 15:14:13 发布

阅读量250

点赞数

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

本文链接：https://blog.csdn.net/z_x_m75/article/details/117065896

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基于canvas实现涂鸦清除保存功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <script>
        window.onload = function () {
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');

            var image = new Image();
            image.src = "0ac75f5e6b30b9c0234a7e9ec8181e38.jpeg";
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;

                ctx.drawImage(image, 0, 0, image.width, image.height);
            }

            // offCanvas.height = $(window).height - footHeight;
            // offCanvas.width = $(window).width;
            canvas.onmousedown = function (ev) {
                var x = ev.clientX - this.offsetLeft;
                var y = ev.clientY - this.offsetTop;
                ctx.beginPath();
                ctx.moveTo(x, y);
                canvas.onmousemove = function (ev) {
                    var targetX = ev.clientX - this.offsetLeft;
                    var targetY = ev.clientY - this.offsetTop;

                    ctx.lineWidth = 1;
                    ctx.lineTo(targetX, targetY);
                    ctx.stroke();
                };
                window.onmouseup = function (ev) {
                    canvas.onmousemove = null;
                    canvas.onmouseup = null;
                };
            };
            var btn = document.getElementById('btn_cls');
            btn.onclick = function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }
            var btn_save = document.getElementById('btn_save');
            btn_save.onclick = function () {
                var url = canvas.toDataURL();
                document.getElementById("img").src = url;
            }
            var btn_wp = document.getElementById('btn_wp');
            btn_wp.onclick = function () {
                var text = prompt("水印");
                if (text != null) {
                    ctx.font="20px Georgia";
                    ctx.fillText(text,10,50);
                }
            }
        }

    </script>
    <style>
        div canvas {
            border: solid 1px green;

        }
    </style>
</head>

<body>
    <div>
        <canvas id="canvas" />
    </div>
    <div>
        <img id='img' />
    </div>
    <div id="footer">
        <input type="button" name="btn" id="btn_cls" width="100px" value="清空" />
        <input type="button" name="btn" id="btn_save" width="100px" value="保存" />
        <input type="button" name="btn" id="btn_wp" width="100px" value="水印" />

    </div>


</body>


</html>

(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于canvas实现涂鸦清除保存功能

基于canvas实现涂鸦清除保存功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <script s
复制链接

扫一扫