【小程序】做了个裁剪图片的自定义组件

最新推荐文章于 2024-08-08 08:30:02 发布
最新推荐文章于 2024-08-08 08:30:02 发布
阅读量2.7k 收藏 13
点赞数
分类专栏： 微信 文章标签： javascript 微信小程序 个人开发 组件化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42669159/article/details/121111203
版权

一、前提

前段时间要做一个九宫格切图的功能，但是因为九宫格主要是正方形切割，这就不可避免的需要裁剪图片。但是在找遍了全网之后，发现并没有一个很好用的微信小程序裁剪图片组件，很多人推荐的也是前端使用的，在小程序中怎么使用甚至能不能用都是个问题。所以，一拍腿！干脆自己做一个吧！

二、组件详情

2.1 组件预览

首先上组件的预览，看看做出来的效果

2.1.1 图片操作

以下分别为双指缩放、单指移动、裁剪框拖动、图片旋转，旋转90度，镜像+还原

双指缩放示例 单指移动示例 裁剪框拖动示例 图片旋转示例 旋转90度示例 镜像+还原示例
2.1.2 生成图片

点击右下角的对勾可以生成裁剪后的图片

最低0.47元/天 解锁文章
头号夜游子
关注
专栏目录
wx-xcropper:小程序图片裁切插件（支持图片缩放、拖动；支持选取框缩放、拖动；支持多种比例裁切；支持多种尺寸裁切；支持多张图片裁切）
05-11
xCropper @(关键词)[小程序|图片裁切|多比例|多尺寸|多图] xCropper是一款专为微信小程序开发的图片裁切组件，通过精心的设计与技术实现，配合小程序强大的功能，带来前所未有的裁切体验。特点概述： 功能丰富 ：支持图片缩放和拖动；支持裁切框缩放和拖动；支持多种裁切比例；支持多种裁切尺寸；支持多种裁切模式；支持多张图片依次裁切； 操作简单 ：多张图片一次裁切，每张图片可选择不同裁切比例；一次选择裁切出多种尺寸 配置简单 ：引入组件，配置一个参数即可使用裁切组件 [TOC] xCropper简介 图片裁切是一个非常普通功能，然而微信小程序原生并没有提供；从网上找了几个图片裁切插件功能也都比较简单，且存在各种小问题；因此决定自己尝试开发一个组件，也是抱着抛砖引玉的想法提交到GitHub上，希望大家一起努力完善。 使用 Clone源代码，从 components 目录中把 xcro
小程序图片裁剪组件
anda9128的博客
01-08 139
近期项目需求，需要图片裁剪上传，发现了这个好东西，文档也很清楚。 我也没时间整理了，直接分享地址吧：https://github.com/we-plugin/we-cropper 转载于:https://www.cnblogs.com/LChenglong/p/10237536.html...
微信小程序图片裁剪组件 - wx-cropper 使用教程
最新发布
gitblog_00958的博客
08-08 666
微信小程序图片裁剪组件 - wx-cropper 使用教程 wx-cropper:scissors: 微信小程序 图片裁剪工具，简单易用项目地址:https://gitcode.com/gh_mirrors/wx/wx-cropper 项目介绍 wx-cropper 是一个基于微信小程序的轻量级图片裁剪组件，设计用于简单易用的图片处理场景。它支持自定义裁剪区域的尺寸，适配于头像选取、商品图片...
微信小程序图片裁剪功能的实现
jimojianghu的专栏
03-08 9944
本文详细讲述了在小程序中实现一个图片裁剪功能的过程，可以看出和在浏览器Web端的实现差别并不大。在核心的图片适配、裁剪框绘制与缩放事件处理上，基本两边可以通用，在小程序中的实现逻辑可以完整在移到web浏览器上，反之亦然。区别可能只只在于图片的加载和保存上，可以使用小程序提供的多种内置接口方法，能教方便的完成。
小程序裁剪图片上传
code
11-21 374
本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等。 图片裁剪解决方案： 　　目前网络上知名的微信小程序图片裁剪插件是we-cropper（文末有链接） 　　操作步骤：下载好we-cropper文件夹，拷贝到小程序目录，可以放在pages列表中。 　　第一步：wxml中引入插件的wxml，使用模板，编写按钮绑定事件。 　　第二步，js中引入插件的js，设置参数，...
小程序图片裁剪组件基于image-cropper（修改版）
艾路菲尔博客
09-30 6046
公司的小程序产品突然让把之前做的压缩图片上传加一个裁剪缩放选中功能。 我… 从微信社区里找了一下，目前最火的image-cropper插件地址 有一说一这款插件的功能文档描述得挺全的（不像某信写的文档）,看了一下源码，用的小程序的自定义组件 直接复制组件到compoents里就可以使用了。 不过样式明显不符合自己的需求。经过一番修改最终的效果： 正当我以为弄完了，结果在保存图片的时候发现了一个问题：裁剪保存的图片会有一定程度的失真， 分析了一下原因。这里我注意到在生成图片的时候是基于裁剪框乘以固定的比例
微信小程序对上传图片进行裁剪实现记录
qq_38405436的博客
12-11 2048
1、将插件项目中image-cropper文件内容复制到本地项目中的compoent中。2、然后在要引用插件的页面json文件中添加image-cropper。3、在引用插件的wxml文件中引用组件，根据自己的需求更改要的效果。4、在引用插件的js中获取处理的图片。
小程序图片裁剪组件image-cropper
09-14
总的来说，image-cropper组件为小程序开发者提供了一个强大而易用的图片裁剪解决方案。通过合理的配置和调用，开发者可以轻松实现各种复杂的图片裁剪需求，提升小程序的功能性和用户体验。在实际开发中，结合小程序...
微信小程序原生自定义上传图片
11-24
综上所述，微信小程序的原生自定义图片上传功能涵盖了权限管理、图片选择与预览、图片处理、上传、错误处理等多个环节，开发者可以根据实际需求进行组合和扩展，打造符合自己应用风格的图片上传组件。同时，通过样式...
微信小程序-图片裁剪、旋转、预览、上传功能实现
11-29
1、点击图片上传按钮时，跳转页面到cropper进行图片选择剪切wx.navigateTo({ url: `/pages/...8、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小，还可以缩放操作，需要的可以解除限制即可。
微信小程序之裁剪图片成圆形的实现代码
10-17
总结来说，微信小程序实现圆形图片裁剪涉及到`movable-view`和`canvas`组件的使用，通过移动和缩放操作结合画布绘图，可以创建一个自定义的圆形裁剪工具。通过监听用户的操作，动态更新`canvas`上的图像，最终得到...
微信小程序实现上传图片裁剪图片过程解析
10-16
在`UploadImg`页面中，通常会有一个裁剪组件，例如使用微信小程序的`wx-crop`插件，或者自定义一个裁剪视图。用户可以在裁剪视图中调整图片的裁剪区域，完成裁剪后，需要调用`wx.canvasToTempFilePath`将裁剪后的...
uniapp微信小程序图片裁剪插件，支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
Honiler的博客
12-05 8941
1.自定义裁剪尺寸 2.定点等比例缩放：移动端以双指触摸中心点为缩放中心点，PC端以鼠标所在点为缩放中心点 3.自由拖动：支持限制滑出边界，也支持回弹效果（滑动时可滑出边界，释放时回弹到边界） 4.图片翻转：在裁剪尺寸非 1:1 的情况下，翻转时宽高无法铺满裁剪区域时，图片会自动放大到合适尺寸 5.裁剪生成新图片 6.本地选择图片 7.可定制样式：可自由选择是否渲染裁剪边框、可伸缩裁剪顶角、参考线 8.裁剪圆角图片：圆形、圆角矩形
【微信小程序】裁剪头像插件
weixin_43076248的博客
08-14 1561
用户上传头像，需要裁剪成正方形，结合在网上找到裁剪图片方法，封装为微信小程序组件。调用很方便。 参数介绍： image_url：需要裁剪的图片链接 showCutImage：是否显示裁剪图片组件 wxml调用： <cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl" wx:if="{{showCutImage}}" ></cutImage> js调用： returnImageUrl: func
微信小程序---图片裁剪、旋转、预览、上传功能实现（已经封装成组件，需要的到资源下载）
weixin_43452154的博客
11-29 2677
4、主页面onshow检索到app.globalData页面路径是否不为空，不为空后将调用上传方法，将路径传递给服务器（不懂的可以查找我主页上传图片的文章）3、页面会进行图片编辑操作，操作好后，通过上传按钮，将本地图片路径先存储到公共app.globalData里面，然后跳转到上一层（主页面）。2、图片上传数据可以进行裁剪、选择、取消、裁剪后预览、上传以及限制大小，还可以缩放操作，需要的可以解除限制即可。6、实现操作简单，方便快捷为用户手机操作图片，进行图片的统一展示。
微信小程序 图片裁剪（兼容性最强）
weixin_45527865的博客
04-28 3560
思路 点击上传图片，调用api wx.chooseImage() 获取到图片的本地临时文件路径列表 将获取的图片地址传入组件中，进行比例裁剪 获取裁剪之后的图片，上传到真实的资源地址 流程： 1. 下载组件（image-cropper） 详细操作步骤以及实现各种效果 链接: https://github.com/1977474741/image-cropper. 2. "usingComponents": { "image-cropper": "../component/im.
uniapp 微信小程序使用we-cropper实现图片裁剪
weixin_71403100的博客
12-25 2655
在开发微信小程序时，经常需要实现用户上传图像并进行裁剪操作的功能。为了实现这一需求，使用了uniapp作为开发框架，并结合了we-cropper这一图像裁剪插件来实现图片裁剪的功能。
小程序基本命令
aiven1637的博客
10-30 3314
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序可移动缩放图片裁剪框
anbuqi的博客
05-08 3550
效果预览 前言 图片裁剪框应用很普遍，也有很多成熟的组件，但是很多组件都是固定裁剪框的位置，通过移动图片来完成图片指定区域的裁剪。这种方法比较容易实现，但是同时存在灵活性不高，裁剪区域选择不精确，图片尺寸不能灵活改变的局限性。下面介绍一种通过使用微信小程序canvas来实现一个可移动缩放的图片裁剪框的方法。 技术要点分析 使用canvas组件实现图片裁剪框涉及以下技术内容： （1）使用canva...
uniapp微信小程序裁剪头像功能
04-04
Uniapp的微信小程序中，实现裁剪头像功能可以使用uni-image-cropper组件。 1. 安装组件 在Uniapp项目的根目录下，打开命令行窗口，输入以下命令安装uni-image-cropper组件。 ``` npm install uni-image-cropper --save ``` 2. 引入组件 在需要使用裁剪头像功能的页面中，引入uni-image-cropper组件。 ```html <template> <view class="container"> <uni-image-cropper :src="src" :aspectRatio="1" @cropperdone="onCropperDone"></uni-image-cropper> </view> </template> <script> import uniImageCropper from '@/components/uni-image-cropper/uni-image-cropper.vue' export default { components: { uniImageCropper }, data() { return { src: '' } }, methods: { onCropperDone(base64) { // 处理裁剪后的图片 } } } </script> ``` 3. 使用组件 在需要裁剪头像的时候，设置图片的src属性为需要裁剪的图片地址。 ```javascript this.src = 'https://example.com/image.jpg' ``` 在用户完成裁剪后，组件会触发cropperdone事件，将裁剪后的图片以base64格式传递给回调函数。在回调函数中，可以对裁剪后的图片进行处理，例如上传到服务器或保存到本地。 ```javascript onCropperDone(base64) { // 处理裁剪后的图片 console.log(base64) } ``` 4. 自定义样式 uni-image-cropper组件支持自定义样式，可以根据需要在页面中添加样式。 ```css .container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; background-color: rgba(0,0,0,0.5); } .uni-image-cropper { width: 100%; height: 80%; } .uni-image-cropper .uni-image-cropper-canvas { border: 2px solid #fff; } ``` 通过设置容器的宽度和高度为100%，使组件覆盖整个页面；设置背景色为半透明的黑色，增强遮罩效果。 通过设置uni-image-cropper组件的宽度为100%、高度为80%，使其在页面中居中显示。 通过设置.uni-image-cropper-canvas的边框为2px白色实线，增强裁剪框的可见性。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值