选择本地的图片当背景实现涂鸦功能

最新推荐文章于 2022-04-22 10:58:06 发布

zeke_x

最新推荐文章于 2022-04-22 10:58:06 发布

阅读量414

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_41997724/article/details/92760939

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择本地的图片当背景实现涂鸦功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        canvas{border:1px solid green;}
    </style>
</head>
<body>
选择图片：<input id="file" type="file">
<button onclick="restuya()">重新涂鸦</button>
<button onclick="saveTu();">保存图片</button>
<hr>
<canvas id="canvas" width="1105" height="500">
    您的破浏览器不兼容，请升级！
</canvas>
<hr>
<div id="res"></div>
<script type="text/javascript">
    // 获取 canvas 对象
    var canvas = document.getElementById('canvas');
    // 获取绘图环境
    var ctx = canvas.getContext('2d');

    var last = null;

    var file = document.getElementById('file');

    // 文件对象
    var filedata = null;

    // 鼠标按下
    canvas.onmousedown = function(){
        // 在鼠标按下后触发鼠标移动事件
        canvas.onmousemove = move;
    }

    // 鼠标抬起取消鼠标移动的事件
    canvas.onmouseup = function(){
        canvas.onmousemove = null;
        last = null;
    }

    // 鼠标移出画布时 移动事件也要取消。
    canvas.onmouseout = function(){
        canvas.onmousemove = null;
        last = null;
    }

    // 鼠标移动函数
    function move(e){
        // console.log(e.offsetX);
        if(last != null){
            ctx.beginPath();
            ctx.moveTo(last[0],last[1]);
            ctx.lineTo(e.offsetX,e.offsetY);
            ctx.stroke();
        }
        // 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来
        // 做下一次 线段的 起始点。
        last = [e.offsetX,e.offsetY];

    }

    // 当文件域内容发生改变时触发函数
    file.onchange = function(e){
        filedata = e.target.files[0];
        // 	实例化文件读取对象
        drawImg(filedata)
    }


    // 重新在画
    function restuya(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawImg(filedata)
    }


    // 绘制图片
    function drawImg(filedata){
        console.log(filedata)
        var readFile = new FileReader();

        readFile.readAsDataURL(filedata);
            console.log(readFile)

        // 图片读取成功
        readFile.onload = function(){
            // 结果
          console.log(this.result);
            // this.result;
            // 第一种方法
            var Img = new Image();
            Img.src = this.result;
           // console.log(Img.src)
         //   console.log(Img);
            Img.onload = function(){
                // 根据 图片的 宽高 来 设置canvas 宽和高
                canvas.width = Img.width;
                canvas.height = Img.height;

                // console.log(Img.width);

                // canvas.width = 500;
                // canvas.width = 500;

                ctx.drawImage(Img,0,0);

            }
        }
    }


    // 保存图片
    function saveTu(){
        var saveImage = canvas.toDataURL('image/png');
        document.getElementById('res').innerHTML = '<img src="'+saveImage+'">';
    }

</script>
</body>
</html>

zeke_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择本地的图片当背景实现涂鸦功能

选择本地的图片当背景实现涂鸦功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas{bor...
复制链接

扫一扫