有部分裁图功能的dome

最新推荐文章于 2024-06-01 09:53:28 发布

lixu102593

最新推荐文章于 2024-06-01 09:53:28 发布

阅读量146

点赞数

文章标签： js css

本文链接：https://blog.csdn.net/lixu102593/article/details/106841101

版权

自己写的一个有点裁图功能的dome

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .dr1{
  height: 260px;
  /* background:url("https://img-blog.csdn.net/20170701221659356") no-repeat; */
  position: relative;
  width: 476px;
}
.aa{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}
.dr{
  position: absolute;
  top:0;
  left:200px;
    width:100px;
    height:100px;
   background:url("https://img-blog.csdn.net/20170701221659356");
   background-repeat: no-repeat;
   background-position: -200px 0;
   mask-size:100px 100px;
   -webkit-mask-size:100px 100px;
   mask: url("http://static.w3ctrain.com/upload_cae6fcb079f57792a47202cb67bbc04a-dji-seeklogo.com.svg");
}
.bao{
    width: 50px;
    height: 20px;
    text-emphasis: center;
    line-height: 20px;
    background-color: aqua;
    color: #ffffff;
}
       
    </style>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="dr1">
    <img id="image" src="https://img-blog.csdn.net/20170701221659356">
    <div class="aa"></div>
    <div class="dr container"></div>
  </div>
  <canvas id="mycanvas" width="100" height="100"></canvas>
  <div onclick="bao()" class="bao">保存</div>
 <div id="jj"></div>
  
  
  <script>
       var objda = document.getElementsByClassName('dr1')[0];
       var obj = document.getElementsByClassName('container')[0];
       var wid = parseInt(getComputedStyle(objda)['width']),
           heig = parseInt(getComputedStyle(objda)['height'])
           wid1 = parseInt(getComputedStyle(obj)['width']),
           heig1 = parseInt(getComputedStyle(obj)['height']);
        var maxX =wid - wid1;//X轴可移动最大距离
        var maxY = heig - heig1;//Y轴可移动最大距离
        var can = document.getElementById("mycanvas");
        var ctx = can.getContext("2d");
        var jj = document.getElementById("jj");
        var images = document.getElementById("image");
       function drap(obj) {
        obj.addEventListener('mousedown', start);
 
        function start(event) {
            // 鼠标左键
            if (event.button == 0) {
                // getComputedStyle(obj)['margin-left'] return XXpx需要转成整型
                // 如果有obj有margin值而不加这个数组拖拽会出现位置偏移
                offsetX = event.pageX - obj.offsetLeft + parseInt(getComputedStyle(obj)['margin-left']);
                offsetY = event.pageY - obj.offsetTop + parseInt(getComputedStyle(obj)['margin-top']);
                // 绑定事件，同样unbind解绑定，此效果的实现最后必须要解绑定，否则鼠标松开后拖拽效果依然存在
                //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
                document.addEventListener('mousemove', move);
                //此处的$(document)可以改为obj
                document.addEventListener('mouseup', stop);
            }
            return false;//阻止默认事件或冒泡
        }
 
        function move(event) {
            console.log(111)
            var moveX = (event.pageX - offsetX)
            var moveY = (event.pageY - offsetY)
          
            //范围限定  最小时取最大  最大时取最小
            if(moveX < 0) {
                moveX=0
            }else if(moveX>maxX){
                moveX=maxX;
            }
            if(moveY < 0) {
                moveY=0;
            }else if(moveY>maxY){
                moveY=maxY; 
            }
            obj.style.left = moveX + 'px';
            obj.style.top = moveY + 'px';
            obj.style.backgroundPosition=-moveX+"px "+-moveY+"px";
           
            return false;//阻止默认事件或冒泡
        }
 
        function stop(envet) {
            console.log(133)
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', stop);
            return false;//阻止默认事件或冒泡
        }
    }
   
    drap(obj);

    function bao(){
        console.log(parseFloat(obj.style.top))
        ctx.drawImage(images,-parseFloat( obj.style.left),-parseFloat( obj.style.top));
         var image = new Image();
        image.src = can.toDataURL("image/png");//生成一张图片
        jj.append(image)
    }


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