Cropper使用(图片裁切)

1.安装包 npm install cropperjs
2.在使用的页面导入cropper js和css

import 'cropperjs/dist/cropper.css';
import Cropper from 'cropperjs';

3.基础配置,详细配置前往GitHub
img标签要有一个容器包裹,img标签需要设置display: block;max-width: 100%;

const image = document.getElementById('image');
const cropper = new Cropper(image, {
   
		viewMode: 1,
		dragMode
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cropper是一个基于HTML5 Canvas技术的图片剪插件,可以对静态图片进行剪操作。如果您想要使用在线图片进行剪,可以先将在线图片下载到本地,然后在本地进行剪操作。具体操作步骤如下: 1.在网页中添加图片下载链接,让用户可以下载图片到本地。 2.使用JavaScript编写下载图片的函数,将图片下载到本地。 3.使用Cropper插件对本地图片进行剪操作。 下面是一个示例代码,您可以参考一下: HTML代码: ``` <div> <img id="image" src="https://example.com/image.png" /> </div> <button id="download">下载图片</button> ``` JavaScript代码: ``` // 下载图片 function downloadImage() { var imageSrc = document.getElementById('image').src; var fileName = 'image.png'; var link = document.createElement('a'); link.href = imageSrc; link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); } // 初始化Cropper插件 var image = document.getElementById('image'); var cropper = new Cropper(image, { aspectRatio: 1 / 1, crop: function(event) { console.log(event.detail.x); console.log(event.detail.y); console.log(event.detail.width); console.log(event.detail.height); } }); // 绑定下载图片按钮的点击事件 var downloadButton = document.getElementById('download'); downloadButton.addEventListener('click', downloadImage); ``` 在这个示例中,我们使用了一个在线图片,并且提供了一个下载图片的按钮。当用户点击下载图片按钮时,会将图片下载到本地。然后我们使用Cropper插件对本地图片进行剪操作,并且在控制台输出剪的信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值