原生js编写图片裁剪上传效果代码-html代码-BFW代码库

原生js编写图片裁剪上传效果代码

代码语言：html

所属分类：上传

代码描述：原生js编写图片裁剪上传效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">


    <style>
        /*页面其他样式*/
        body{width:auto;height:auto;margin:0;padding:10px;}
        #inputBox{width:300px;height:20px;}
        #ZHLCutBox{display:none;padding:0 0 10px 0;position:absolute;top:0;left:0;border:1px solid #ccc;background:#fff;}
        
        /*裁剪控件样式*/
        button{margin:10px;}
        #ZHLCutCon,#ZHLCutSee{margin:0 10px; 10px 10px;}
        #ZHLCutCon{min-width:500px;min-height:500px;max-width:100%;max-height:100%;border:1px solid #ccc;position:relative;}
        #ZHLCutDeImg{position:absolute;z-index:1;user-select: none;display:none;}
        #ZHLCutE{position:absolute;z-index:3;background:#fff;opacity:0.4;user-select: none;}
    </style>

</head>

<body>

    <!-- 普通表单 -->
    <form action="" method="post" autocomplete="off">
        <!-- 这里只获得图片路径进行保存即可（点击这里触发裁剪空间并上传文件然后返回图片路径） -->
        <input type="text" id="inputBox" placeholder="点击上传图片" />
        <input type="submit" value="保存">
    </form>

    <!-- 裁.........完整代码请登录后点击上方下载按钮下载查看