jquery cropper.js实现移动端上传图片裁剪功能

最新推荐文章于 2024-08-09 07:15:36 发布

hl_Abel

最新推荐文章于 2024-08-09 07:15:36 发布

阅读量853

点赞数 1

文章标签： canvas html js

本文链接：https://blog.csdn.net/hl_Abel/article/details/105291743

版权

本文介绍如何利用cropper.js在移动端实现图片上传后进行裁剪的功能，包括图片旋转和自由选择裁剪区域。关键在于初始化时正确处理图片显示区域的canvas大小和位置，以及裁剪框的设定。

摘要由CSDN通过智能技术生成

通过cropper.js实现移动端上传图片裁剪功能，并可以旋转图片和自由选择裁剪区域；效果如图：
在这里插入图片描述
根据cropper.js官方文档很容易实现图片裁剪功能，但是根据需要需要做到上图效果就需要才cropper初始化的时候做一些数据的处理来计算图片显示区域canvas的大小和位置；然后在设置裁剪框的大小和位置。
实现如下：

preImg.cropper({
		// aspectRatio: 4 / 3, //裁剪框比例1:1
		viewMode: 1,
		autoCropArea: 1,
		dragMode:"move",
		autoCrop: false,
		movable: false,
		zoomable: false,
		zoomOnTouch: false,
		zoomOnWheel: false,
		toggleDragModeOnDblclick: false,
		ready: function () {
			var containerData = preImg.cropper('getContainerData');
			var cropBoxData = preImg.cropper('getCropBoxData');
			var imageData = preImg.cropper('getImageData');
			var CanvasData = preImg.cropper('getCanvasData');
			if (imageData.rotate == null || imageData.rotate == undefined) {
				imageData.rotate &