手机端、H5、vue，图片裁剪功能

最新推荐文章于 2024-03-30 09:58:14 发布

尼古拉·瑞

最新推荐文章于 2024-03-30 09:58:14 发布

阅读量508

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/letnewworld/article/details/125679625

版权

核心是引用了Clipic.js来实现图片裁剪效果
Clipic.js源码地址==https://github.com/teojs/clipic

图片裁剪效果图如下

在这里插入图片描述

步骤

npm install clipic

//在使用的页面
<template>
  <img :src="base64" />
  <input type="file" name="file" accept="image/*" @change="uploadImg" />
</template>

import Clipic from 'clipic';
const clipic = new Clipic()

base64: '',

methods: {
   uploadImg(event) {
      const files = event.files
      const reader = new FileReader()
      reader.readAsDataURL(files[0])
      reader.onload = img => {
        clipic.getImage({
          width: 500,
          height: 400,
          src: img.target.result,
          onDone: base64 => {
            this.base64 = base64
          }
        })
      }
      event.value = ''
   }
}