原生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
    }
    const onChange = (file) => {
        onInit(URL.createObjectURL(file))
    }
    // 加载图片，并初始化裁剪功能
    const onInit = (src) => {
        clipCvs.width = clipCvs.height = size
        img.src = src
        img.onload = () => {
            let width = img.width
            let height = img.height
            if (width > maxW) {
                
                height = maxW / width * height
                width = maxW
            }
            cvs.width = width
            cvs.height = height
            render(width / 2 - size / 2, height / 2 - size / 2)
        .........完整代码请登录后点击上方下载按钮下载查看