图片支持滚轮缩放(缩放中心为鼠标位置)_JS实现图片缩放、拖动、剪裁、预览及保存效果...

先上效果演示：

功能说明

选择图片区域并剪裁为头像

Html部分

页面分左右两部分：左边显示遮罩图片的缩放与拖动，右边显示剪裁后图片的预览

<div class="content">
    <div class="left">
        <div class="img-wrap">
            <img class="img-select" src="img7.jpg" alt="">
            <div class="mask"></div>
        </div>
        <input class="range" min="0" max="100" value="50" step="1" type="range">
    </div>
    <div class="preview-wrap">
        <div class="avatar-wrap">
            <canvas class="canvas"></canvas>
        </div>
        <div class="button-wrap">
            <button class="clip">剪裁</button>
            <button class="save">保存</button>
            <button class="reset">重置</button>
        </div>
    </div>
</div>

CSS部分

镂空遮罩效果可参见：

https://zhuanlan.zhihu.com/p/344757741​zhuanlan.zhihu.com

<style>
    .content{
    
        display: flex;
        justify-content: space-between;
        align-items: center;
        height:100vh;
        background-color: lightgrey;
    }
    .left{
    
        width:60%;
        height:80%;
        margin: auto;
    }
    .img-wrap{
    
        width: 100%;
        height: 100%;
        margin:auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }
    .img-select{
    
        position:absolute;
    }
    .img-select:hover{
    
        cursor: move;
    }
    .mask{
    
        width:180px;
        height:180px;
        border-radius: 50%;
        z-index: 1;
        border: 3px solid white;
        box-shadow: 0 0 0 2000px rgba(0,0,0,0.7);
    }
    .range{
    
        margin: 15px auto;
        width: 100%;
    }
    .preview-wrap{
    
        width:30%;
        margin-right: 30px;
    }
    .avatar-wrap{
    
        width:180px;
        height: 180px;
        display:flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border:3px solid white;
        margin: 0 auto;
        background-color: white;
        position: relative;
        overflow: hidden;
    }
    .canvas{
    
        width: 100%;