image-cropper

一款高性能的小程序图片裁剪插件，支持旋转、设置尺寸

1.性能超高超流畅，大图毫无卡顿感。

2.可以设置导出图片尺寸。

3.组件化，使用非常简单。

4.自由模式和限制可随意切换。

5.点击中间窗口实时查看裁剪结果。

原文档下载地址组件放到项目中即可

https://github.com/wx-plugin/image-cropper

初始准备

1.json文件中添加image-cropper：

 "usingComponents": {"image-cropper": "../image-cropper/image-cropper"},"navigationBarTitleText": "裁剪图片","disableScroll": true
2.wxml文件
<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>

3.简单示例

Page({data: {src:'',width:250,//宽度height: 250,//高度},onLoad: function (options) {//获取到image-cropper对象this.cropper = this.selectComponent("#image-cropper");//开始裁剪this.setData({src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",});wx.showLoading({title: '加载中'})},cropperload(e){console.log("cropper初始化完成");},loadimage(e){console.log("图片加载完成",e.detail);wx.hideLoading();//重置图片角度、缩放、位置this.cropper.imgReset();},clickcut(e) {console.log(e.detail);//点击裁剪框阅览图片wx.previewImage({current: e.detail.url, // 当前显示图片的http链接urls: [e.detail.url] // 需要预览的图片http链接列表})},})

有个地方应注意下，就是获取截取后的图片，需要调用此插件的一个函数才可以取得：

this.cropper.getImg((obj) => {

// 这里就是想要截取的图片传给后台的虚拟路径

console.log(obj.url)

})

ps：详细内容查看文档，这里只是介绍一下使用方法和取截取的图片虚拟路径。

微信小程序上传图片裁剪工具image-cropper使用相关推荐

微信小程序上传图片预览删除
微信小程序上传图片预览删除 ①.wxml<view class='footerEditOne'><view wx:for="{{src}}" wx:key=' ...
微信html5图片裁切,微信小程序图片裁剪工具we-cropper
微信小程序图片裁剪工具we-cropper 一款灵活小巧的canvas图片裁剪器在线体验 Feature 实用的API 灵活的钩子函数多场景的demo可供参考: 常规裁剪上传裁剪头像裁剪网络图 ...
微信小程序上传图片至服务器Springboot接收格式的问题
微信小程序上传图片至服务器Springboot 需求:通过微信小程序上传图片到服务器,保存至服务器. 实现 Wxml <button bindtap="choose"> ...
微信小程序--上传图片加水印
微信小程序–上传图片加水印 wxml <canvas class='canvas' canvas-id="firstCanvas"></canvas> cs ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序上传图片写法
微信小程序上传图片小程序上传图片需要用到小程序API中的wx.uploadFile()方法.以下是一个基本的示例代码: wx.chooseImage({count: 1,sizeType: ['or ...
微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
微信小程序上传图片组件，多选+单选+预览+删除
微信小程序上传图片+预览+删除组件代码 HTML <view class="uploadImg-wrap"><view class="upload-f ...
微信小程序上传图片到七牛云
七牛云上传图片第一次用七牛云,目的是存储一些图片 1.首先是七牛云的注册,很简单. 2.注册完创建新的空间 3.这时候会自动分配给你一个域名,但是有效期是30天. 4.若要长久使用,最好用自己的域名 ...

微信小程序上传图片裁剪工具image-cropper使用

image-cropper

一款高性能的小程序图片裁剪插件，支持旋转、设置尺寸

有个地方应注意下，就是获取截取后的图片，需要调用此插件的一个函数才可以取得：

ps：详细内容查看文档，这里只是介绍一下使用方法和取截取的图片虚拟路径。

微信小程序上传图片裁剪工具image-cropper使用相关推荐

最新文章

热门文章