fileReader之自定义显示图片的盒子以及drawImage实现的案例

最新推荐文章于 2023-02-16 11:16:00 发布

欢乐程序小姐姐

最新推荐文章于 2023-02-16 11:16:00 发布

阅读量187

点赞数 2

文章标签： canvas html5

本文链接：https://blog.csdn.net/weixin_46513664/article/details/105071080

版权

一、fileReader

二、图片的预览案例

三、截取视频中的某一帧

四、图片压缩

drawImage 
     1. ctx.drawImage(img,x,y)
            img : 要使用的对象
            x y : 在画布上开始的坐标
     2. ctx.drawImage(img,x,y,width,height)
            img : 要使用的对象
            x y : 在画布上开始的坐标
            width height : 在canvas中显示的大小
     3. ctx.drawImage(img,开始x,开始y,截取的宽度,截取的高度,画布x,画布y,图像宽,图像高)
            img : 要使用的对象

一、我们可以使用fileReader属性来把用户通过input的file类型选择的图片展示在自己写的盒子里

html部分：

<input type="file" name="" id="">
<div class="box"></div>

js部分：

        var input = document.querySelector("input");
        var box = document.querySelector(".box");
        var f = new FileReader();
        f.onload = function () {
            console.log(f.result);
            var image = document.createElement("img");
            image.src = f.result;
            image.width=100
            box.appendChild(image)
        }
        input.onchange=function(){
            f.readAsDataURL(input.files[0]);
        }

最终的效果图如下：

二、图片的预览案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="file">
    <div class="box"></div>
    <script>
        var file = document.querySelector("input")
        var box = document.querySelector(".box")
        var f = new FileReader()

        f.onload = function () {
            var img = new Image()
            img.src = f.result

            img.onload = function () {
                var canvas = document.createElement("canvas")
                var ctx = canvas.getContext("2d")
                canvas.width = 100
                canvas.height = 100

                var cut = cutImage(img)

                ctx.drawImage(img, cut.x, cut.y, cut.width, cut.height, 0, 0, 100, 100)

                box.appendChild(canvas)
            }
        }

        file.onchange = function () {
            f.readAsDataURL(file.files[0])
        }

        function cutImage(img) {
            var width = img.width,
                height = img.height

            if (width >= height) {
                return {
                    x: width / 2 - height / 2,
                    y: 0,
                    width: height,
                    height: height
                }
            }
            if (width < height) {
                return {
                    x: 0,
                    y: height / 2 - width / 2,
                    width: width,
                    height: width
                }
            }
        }

    </script>
</body>

</html>

最终实现的效果图：

三、截取视频中的某一帧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <video src="./video/1.mp4" controls></video>
    <button>15</button>
    <script>
        var video = document.querySelector("video")
        var btn = document.querySelector("button")
        btn.onclick = function(){
            var v = document.createElement("video") // 穿件一个video标签
            var canvas = document.createElement("canvas") // 创建一个canvas标签
            var ctx = canvas.getContext("2d") 
            v.src = video.src // 将video的src 赋值给新创建的v的src
            v.currentTime = btn.innerHTML //将新创建的v的时间调整到某个时间点

            v.oncanplay = function(){
                console.log([v])
                ctx.drawImage(v,0,0,v.videoWidth,v.videoHeight,0,0,300,150) //将这一帧的图像使用canvas画下来 
                document.body.appendChild(canvas)// 将canvas添加到body中
            }

        }

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

最终实现的效果图如图所示：

四、图片压缩

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="file">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <script>
        /*

            图片压缩
                canvas.toDataURL("image/jpeg",0.5)
                第一个参数指明格式
                第二个是图片的质量
        */
        
        var file = document.querySelector("input"),
            f = new FileReader()

        f.onload = function(){
            var img = new Image()
            img.src = f.result
            img.onload = function(){
                var canvas = document.createElement("canvas")
                var ctx = canvas.getContext("2d")
                canvas.width = img.width
                canvas.height = img.height
                ctx.drawImage(img,0,0)
                console.log(canvas.toDataURL("image/webp",0.1)) //返回一个base64的格式
            }
        }

        file.onchange = function(){
            f.readAsDataURL(file.files[0])
        }
    
    </script>
</body>
</html>

欢乐程序小姐姐

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
fileReader之自定义显示图片的盒子以及drawImage实现的案例

一、fileReader二、图片的预览案例三、截取视频中的某一帧四、图片压缩一、我们可以使用fileReader属性来把用户通过input的file类型选择的图片展示在自己写的盒子里html部分：<input type="file" name="" id=""><div class="box"></div>js部分： ...
复制链接

扫一扫