js上传图片裁剪

  • js上传图片裁剪已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

最近做一个图片上传需要裁剪一下的功能然后百度了一下,找到了cropperjs说明文档 https://www.npmjs.com/package/cropperjs

最近做一个图片上传需要裁剪一下的功能然后百度了一下,找到了cropperjs

说明文档 https://www.npmjs.com/package/cropperjs

 

这是一个简单的基础使用 

<!DOCTYPE html>
<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">
  <title>上传图片</title>
  <!-- 样式 -->
  <link rel="stylesheet" href='./node_modules/cropperjs/dist/cropper.css' />
  <!-- js  -->
  <script src="./node_modules/cropperjs/dist/cropper.js"></script>
  <style>
    .allbox{
      width: 100%;
      display: flex;
      margin-bottom: 20px;
    }

    /* 装上传图片 */
    .box1{
      width: 500px;
      height: 500px;
      background: rgba(40, 40, 40, 0.3);
    }
    /* 被裁剪展示图片容器 */
    .box2{
      width: 100px;
      height: 100px;
      margin-left:100px;
    }

  </style>
</head>
<body>
  <div class="allbox">
    <!-- 展示图片 -->
    <div class="box1">
      <img id="img1">
    </div>

    <div class="box2">

    </div>
  </div>
  <input id="input1" type="file"></input>
  <button id="button1">保存图片</button>

  <script>

    let img1 =document.getElementById('img1')
    let input1 = document.getElementById('input1')
    let button1 = document.getElementById('button1')

    // 上传的图片储存一下
    let fileImg;
    // 声明一个变量
    let cropper = new Cropper(img1,{
      aspectRatio:1/1,  // 裁切比例
      viewMode:1, // 0 无限制 1 裁剪框不超过图片 2具体个1差不多没看出 ,3拉伸图片
      autoCropArea: 0.5 , //裁切框大小 默认0.8(原图的80%)
      // 跟多配置选项  https://www.npmjs.com/package/cropperjs
    })

    //上传图片时
    input1.onchange = (event) => {

      fileImg = event.target.files[0]

      // cropper.replace(url,[hasSameSize]) 设置图片 hasSameSize type:Boolean,Default: false
      cropper.replace(URL.createObjectURL(fileImg),false)

    }

    // 保存时
    button1.onclick = () => {
      let base64Img = cropper.getCroppedCanvas().toDataURL()
      console.log(base64Img)

      cropper.getCroppedCanvas().toBlob((blob) => {
        // 得到 blob 图片
        console.log('blob',blob)
        // 得到 file 文件

        console.log('file',new window.File([blob], fileImg.name, {type: fileImg.type}))
      })
    }

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