原生js实现图片选择上传裁剪并下载代码-html代码-BFW代码库

原生js实现图片选择上传裁剪并下载代码

代码语言：html

所属分类：其他

代码描述：原生js实现图片选择上传裁剪并下载代码

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

<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">
  
</head>

<body>
    <div style="margin-bottom: 10px">
        上传图片：<input type="file" onchange="onChange(this.files[0])">
    </div>
    <canvas id="cvs"></canvas>
    <canvas id="clipCvs" height="150" width="150"></canvas>
    <button id="download">下载图片</button>

<script>
    const cvs = document.getElementById('cvs')
    const clipCvs = document.getElementById('clipCvs')
    const download = document.getElementById('download')
    const ctx = cvs.getContext('2d')
    const clipCtx = clipCvs.getContext('2d')
    const img = new Image()
    let size = 150
    let maxW = 400
    const p = {
        left: 0,
        top: 0,
        stepX: 0,
        stepY: 0
    }
    con.........完整代码请登录后点击上方下载按钮下载查看