JavaScript实战练习——图片裁剪

最新推荐文章于 2024-09-03 12:23:33 发布

邻家的肥猫

最新推荐文章于 2024-09-03 12:23:33 发布

阅读量1.9k

点赞数 2

分类专栏：前端实战练习合集文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/sinat_50265804/article/details/123807670

版权

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #app {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app"></div>

    <script src="/通用资源/publicPackage.js"></script>
    <script>
        var app = document.getElementById('app');
        dealImage(app, '/img/small.jpg');

        function dealImage(dom, url) {
            //创建图片
            var img = new Image();
            //设置图片地址
            img.src = url;
            //图片加载完毕
            img.onload = function () {
                var width = img.width;
                var height = img.height;
                // console.log(img.width, img.height);
                //创建遮罩层
                var layer = document.createElement('div');
                //创建切图层
                var mask = document.createElement('div');
                //创建小圆点
                var dot = document.createElement('div');
                dom.appendChild(layer);
                dom.appendChild(mask);
                mask.appendChild(dot);
                css(dom, {
                    width: width + 'px',
                    height: height + 'px',
                    backgroundImage: 'url(' + url + ')',
                    position: 'relative',
                    border: '1px solid #ccc'
                });
                css(layer, {
                    position: 'absolute',
                    left: 0,
                    top: 0 ,
                    right: 0,
                    bottom: 0,
                    backgroundColor: 'rgba(0, 0, 0, 0.4)'
                });
                css(mask, {
                    width: width / 4 + 'px',
                    height: height / 4 + 'px',
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    backgroundImage: 'url(' + url + ')',
                    cursor: 'mov