微信小程序裁剪头像插件使用方法详解
本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码，供大家参考，具体内容如下
用户上传头像，需要裁剪成正方形，结合在网上找到裁剪图片方法，封装为微信小程序组件。调用很方便。
参数介绍：
- image_url：需要裁剪的图片链接
- showCutImage：是否显示裁剪图片组件
wxml调用：
<cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl" wx:if="{{showCutImage}}" >
</cutImage>
js调用：
returnImageUrl: function (e) {
//e.detail.imageUrl,e.detail.showCutImage
}
wxml代码：
<view class='fixed-upimg'>
<view class="wx-content-info" >
<view class="iamge-box" style="width:100%;height:{{imageBoxHeight}}px;">
<image style="height:{{imageHeight}}px;width:{{imageWidth}}px;" src="{{imageUrl}}"></image>
<view class="wx-corpper-crop-box" bindtouchstart="contentStartMove" bindtouchmove="contentMoveing" style="width:{{cutW}}px;height:{{cutH}}px;left:{{cutL}}px;top:{{cutT}}px">
<view class="wx-cropper-view-box">
<view class="wx-cropper-dashed-h"></view>
<view class="wx-cropper-dashed-v"></view>
<view class="wx-cropper-line-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-line-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-t" data-drag="top" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-tr" data-drag="topTight"></view>
<view class="wx-cropper-point point-r" data-drag="right" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-rb" data-drag="rightBottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-b" data-drag="bottom" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-bl" data-drag="bottomLeft"></view>
<view class="wx-cropper-point point-l" data-drag="left" catchtouchstart="dragStart" catchtouchmove="dragMove"></view>
<view class="wx-cropper-point point-lt" data-drag="leftTop"></view>
</view>
</view>
</view>
<canvas canvas-id="myCanvas" style="position:absolute;border: 1px solid red; width:{{imageW}}px;height:{{imageH}}px;top:-9999px;left:-9999px;"></canvas>
<view class='button-tjtp' bindtap="getImageInfo" style="position:fixed;bottom:0rpx;"> 提交图片 </view>
</view>
</view>
wxss代码：
.button-tjtp{
width: 300rpx;
height: 45px;
border-radius: 50rpx;
color: #151D37;
background-color: #fff;
margin: 20px 225rpx;
font-size: 30rpx;
display: flex;
justify-content: center;
align-items: center;
}
.fixed-upimg{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #000;
z-index: 9999;
}
.wx-content-info{
position: fixed;
top: 0rpx;
left: 0;
right: 0;
bottom: 0;
}
.iamge-box{
display: flex;
justify-content: center;
align-items: center;
}
.wx-corpper-crop-box{
position: absolute;
width: 500rpx;
height: 500rpx;
background: rgba(255,255,255,0.3);
z-index: 2;
}
.wx-cropper-view-box {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: visible;
outline: 1px solid #69f;
outline-color: rgba(102, 153, 255, .75)
}
/* 横向虚线 */
.wx-cropper-dashed-h{
position: absolute;
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top: 1px dashed rgba(255,255,255,0.5);
border-bottom: 1px dashed rgba(255,255,255,0.5);
}
/* 纵向虚线 */
.wx-cropper-dashed-v{
position: absolute;
left: 33.33333333%;
top: 0;
width: 33.33333333%;
height: 100%;
border-left: 1px dashed rgba(255,255,255,0.5);
border-right: 1px dashed rgba(255,255,255,0.5);
}
/* 四个方向的线 为了之后的拖动事件*/
.wx-cropper-line-t{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
top: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: n-resize;
}
.wx-cropper-line-t::before{
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.wx-cropper-line-r{
position: absolute;
display: block;
background-color: #69f;
top: 0;
right: 0px;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: e-resize;
}
.wx-cropper-line-r::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.wx-cropper-line-b{
position: absolute;
display: block;
width: 100%;
background-color: #69f;
bottom: 0;
left: 0;
height: 1px;
opacity: 0.1;
cursor: s-resize;
}
.wx-cropper-line-b::before{
content: '';
position: absolute;
top: 50%;
right: 0rpx;
width: 100%;
-webkit-transform: translate3d(0,-50%,0);
transform: translate3d(0,-50%,0);
bottom: 0;
height: 41rpx;
background: transparent;
z-index: 11;
}
.wx-cropper-line-l{
position: absolute;
display: block;
background-color: #69f;
top: 0;
left: 0;
width: 1px;
opacity: 0.1;
height: 100%;
cursor: w-resize;
}
.wx-cropper-line-l::before{
content: '';
position: absolute;
top: 0;
left: 50%;
width: 41rpx;
-webkit-transform: translate3d(-50%,0,0);
transform: translate3d(-50%,0,0);
bottom: 0;
height: 100%;
background: transparent;
z-index: 11;
}
.wx-cropper-point{
width: 5px;
height: 5px;
background-color: #69f;
opacity: .75;
position: absolute;
z-index: 3;
}
.point-t{
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize;
}
.point-tr{
top: -3px;
left: 100%;
margin-left: -3px;
cursor: n-resize;
}
.point-r{
top: 50%;
left:100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-rb{
left: 100%;
top: 100%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
cursor: n-resize;
width: 24rpx;
height: 24rpx;
background-color: #69f;
position: absolute;
z-index: 1112;
opacity: 1;
}
.point-b{
left:50%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-bl{
left:0%;
top: 100%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-l{
left:0%;
top: 50%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
.point-lt{
left:0%;
top: 0%;
margin-left: -3px;
margin-top: -3px;
cursor: n-resize;
}
/* 裁剪框预览内容 */
.wx-cropper-viewer{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wx-cropper-viewer image{
position: absolute;
z-index: 2;
}
js代码：
var pageX = 0
// 拖动时候的 pageY
var pageY = 0
// 移动时 手势位移与 实际元素位移的比
var dragScaleP = 2
var pixelRatio = wx.getSystemInfoSync().pixelRatio
Component({
/**
* 组件的属性列表
*/
properties: {
imageUrl:{
type:String,
value:''
}
},
/**
* 组件的初始数据
*/
data: {
imageBoxHeight:0,
windowWidth: 0,
imageUrl:''
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
this.getSysInfo();
this.getImageDetail();
},
},
created: function () {
this.getSysInfo();
},
/**
* 组件的方法列表
*/
methods: {
// 获取设备信息
getSysInfo () {
wx.getSystemInfo({
success: (res) => {
console.log(res)
this.setData({
imageBoxHeight: res.windowHeight - 85,
windowWidth: res.windowWidth
})
},
})
},
getImageDetail(){
wx.getImageInfo({
src: this.data.imageUrl,
success: (res) => {
this.setData({
imageW: res.width / 2,
imageH: res.height / 2
})
if (res.width >= res.height) {
var h = (res.height * this.data.windowWidth) / res.width;
this.setData({
imageWidth: this.data.windowWidth,
imageHeight: h,
cutW: h,
cutH: h,
cutL: (this.data.windowWidth - h) / 2,
cutT: (this.data.imageBoxHeight - h) / 2
})
} else {
var w = (this.data.imageBoxHeight * res.width) / res.height;
this.setData({
imageWidth: w,
imageHeight: this.data.imageBoxHeight,
cutW: w,
cutH: w,
cutL: (this.data.windowWidth - w) / 2,
cutT: (this.data.imageBoxHeight - w) / 2
})
}
}
})
},
// 拖动时候触发的touchMove事件
contentMoveing(e) {
var _this = this
// _this.data.cutL + (e.touches[0].pageX - pageX)
// console.log(e.touches[0].pageX)
// console.log(e.touches[0].pageX - pageX)
var dragLengthX = (pageX - e.touches[0].pageX)
var dragLengthY = (pageY - e.touches[0].pageY)
var minX = Math.max(_this.data.cutL - (dragLengthX), 0)
var minY = Math.max(_this.data.cutT - (dragLengthY), 0)
var maxX = _this.data.imageWidth - _this.data.cutW
var maxY = _this.data.imageHeight - _this.data.cutH
if (_this.data.imageWidth == _this.data.cutW) {
this.setData({
cutT: Math.min(maxY, minY),
})
} else if (_this.data.imageHeight == _this.data.cutH) {
this.setData({
cutL: Math.min(maxX, minX)
})
}
console.log(`${maxX} ----- ${minX}`)
pageX = e.touches[0].pageX
pageY = e.touches[0].pageY
},
// 拖动时候触发的touchStart事件
contentStartMove(e) {
pageX = e.touches[0].pageX
pageY = e.touches[0].pageY
},
// 裁剪图片
getImageInfo() {
var _this = this
console.log('shengcheng:' + _this.data.imageUrl)
wx.showLoading({
title: '图片生成中...',
})
// wx.downloadFile({
// url:_this.data.imageSrc, //仅为示例，并非真实的资源
// success: function (res) {
// 将图片写入画布
const ctx = wx.createCanvasContext('myCanvas', _this)
// ctx.drawImage(res.tempFilePath)
ctx.drawImage(_this.data.imageUrl, 0, 0, _this.data.imageW, _this.data.imageH)
ctx.draw(true, () => {
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题
var canvasW = (_this.data.cutW / _this.data.imageWidth) * (_this.data.imageW)
var canvasH = (_this.data.cutH / _this.data.imageHeight) * (_this.data.imageH)
var canvasL, canvasT;
if (_this.data.imageHeight == _this.data.imageBoxHeight) {
canvasL = (0 / _this.data.imageWidth) * (_this.data.imageW)
} else {
canvasL = (_this.data.cutL / _this.data.imageWidth) * (_this.data.imageW)
}
if (_this.data.imageWidth == _this.data.windowWidth) {
canvasT = (0 / _this.data.imageHeight) * (_this.data.imageH)
} else {
canvasT = (_this.data.cutT / _this.data.imageHeight) * (_this.data.imageH)
}
console.log(`canvasW:${canvasW} --- canvasH: ${canvasH} --- canvasL: ${canvasL} --- canvasT: ${canvasT} -------- _this.data.imageW: ${_this.data.imageW} ------- _this.data.imageH: ${_this.data.imageH} ---- pixelRatio ${pixelRatio}`)
wx.canvasToTempFilePath({
x: canvasL,
y: canvasT,
width: canvasW,
height: canvasH,
destWidth: canvasW,
destHeight: canvasH,
canvasId: 'myCanvas',
success: function (res) {
// 成功获得地址的地方
var tempFilePath = res.tempFilePath;
wx.hideLoading()
_this.returnImageUrl(tempFilePath)
},
fail: function (res) {
console.log(res)
wx.hideLoading()
wx.showModal({
content: '抱歉，图片上传失败！图片过大可能导致图片上传失败！',
showCancel: false,
confirmText: '我知道了',
confirmColor: "#151D37",
success: function (res) {
if (res.confirm) {
_this.setData({
imageFixed: false,
tempFilePath: res.tempFilePath
})
}
}
})
}
}, _this)
})
},
returnImageUrl: function (url) {
this.triggerEvent('returnImageUrl', {
imageUrl: url,
showCutImage:false
})
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
微信小程序实现裁剪图片大小
本文实例为大家分享了微信小程序实现裁剪图片大小的具体代码,供大家参考,具体内容如下 效果图 .wxml <button bindtap="uploadtap">上传图片</button> <image style="width: 100%;" mode="widthFix" src="{{canfile_image}}"></image> <canvas canvas-id
-
微信小程序实现上传图片裁剪图片过程解析
有的时候我们上传头像,商品图片这些的时候有的希望上传的是自己想要的图片形状,吧图片宽高固定死的话,他又会变形,比列差不多的看起来没什么区别,不固定的话,他们会宽的高的不一样,看起来完全不舒服,不美观了. 所以想了个这样的办法,用这个裁剪工具,在选择图片的时候,就把图片的大小裁剪成自己想要的大小,这样就都一致了,下面我们来看看吧! wxml: <view class="wancll-padded-15 wancll-bg-white wancll-font-size-14">
-
微信小程序图片选择区域裁剪实现方法
本文介绍了微信小程序图片选择区域屏裁剪实现方法,分享给大家.具体如下: 效果图 HTML代码 <view class="index_all_box"> <view class="imgCut_header"> <view class="imgCut_header_l" bindtap='okCutImg'>开始裁剪</view> <view class="imgCut_header_
-
微信小程序之裁剪图片成圆形的实现代码
前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-view组件 可移动的视图容器,在页面中可以拖拽滑动 会有好多个属性,在这里不一一介绍,只说我们能
-
微信小程序简单的canvas裁剪图片功能详解
小程序miniso的一个发布内容截图功能,话不多,先上代码 wxml文件: <view class="cut-1-1 t-c {{cutSelect == 1? 'cut-select':''}}" data-cut="1" bindtap="selectCutType">1:1</view> <view class="cut-3-4 t-c {{cutSelect == 2? 'cut-select':'
-
微信小程序实现照片裁剪
本文实例为大家分享了微信小程序实现照片裁剪的具体代码,供大家参考,具体内容如下 前段时间用小程序的canvas.movable-area.movable-view封装了一个按比例裁剪照片的组件,无需引用任何插件.废话不多说,直接贴代码: 组件代码 1.cut_photo.json { "component": true } 2.cut_photo.wxml <view> <canvas class="fyj_canvas" canvas-i
-
微信小程序裁剪头像插件使用方法详解
本文实例为大家分享了微信小程序裁剪头像插件的具体使用代码,供大家参考,具体内容如下 用户上传头像,需要裁剪成正方形,结合在网上找到裁剪图片方法,封装为微信小程序组件.调用很方便. 参数介绍: image_url:需要裁剪的图片链接 showCutImage:是否显示裁剪图片组件 wxml调用: <cutImage imageUrl="{{image_url}}" bind:returnImageUrl="returnImageUrl" wx:if="
-
微信小程序scroll-view隐藏滚动条的方法详解
效果图: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示: 2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap; 5.有时候为了美观要隐藏滚动条,需要在样式里加上 核心代码: 在w
-
微信小程序实现页面导航的方法详解
目录 一.页面导航 二.声明式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 三.编程式导航 1.导航到tabBar页面 2.导航到非tabBar页面 3.后退导航 四.导航传参 1.声明式导航传参 2.编程式导航传参 3.在onLoad中接收导航传参 五.总结 一.页面导航 1.什么是页面导航 页面导航是指页面之间的相互跳转. 2.页面导航的两种实现方式 页面导航有两种实现方式: 声明式导航 方法:在页面声明一个navigator组件,通过点击这个组件来实现页面的
-
微信小程序自定义toast组件的方法详解【含动画】
本文实例讲述了微信小程序自定义toast组件的方法.分享给大家供大家参考,具体如下: 怎么创建就不说了,前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}"> <view class="to
-
微信小程序Echarts图表组件使用方法详解
1:下载 GitHub 上的 项目 2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的. 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面. 好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开始去组件里面搬运复制黏贴代码了. wxml <!--index.wxml--> <view class="container"> <ec-canvas id=&
-
微信小程序获取用户openid的方法详解
目录 获取openid的思路 需要修改的地方 完整代码 总结 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系 然而因为小程序中的openid不可以直接使用需要用code(登录凭证)去换取openid 获取openid的思路 获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key) 我这里是用一个点击事件来触
-
微信小程序自定义波浪组件使用方法详解
最近看到好多app上有波浪背景,有动态的,有静态的,这里是在小程序中用得动态. 先看看效果图:里面的文本是组件内部定义的. 这是用两个svg的图片用css关键帧动画做的效果(这里谢谢子弹短信里前端群的小伙伴提供的web版的css动画文件) 在小程序中使用,注意一个问题:就是svg不可以直接使用,需要转为base64(这个大家应该有收藏吧),这里我已经转换好了,在下面的wxss中. 这里顺便用一下自定义组件: 首先定义组件 wave wave.wxml:这里我默认是用得显示个人信息.其中isSho
-
微信小程序开发图片拖拽实例详解
微信小程序开发图片拖拽实例详解 1.编写页面结构:moveimg.wxml <view class="container"> <view class="cnt"> <image class="image-style" src="../uploads/foods.jpg" style="left:{{ballleft}}px;width:{{screenWidth}}px" bi
-
微信小程序后台解密用户数据实例详解
微信小程序后台解密用户数据实例详解 微信小程序API文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html openId : 用户在当前小程序的唯一标识 因为最近根据API调用https://api.weixin.qq.com/sns/jscode2session所以需要配置以下服务,但是官方是不赞成这种做法的, 而且最近把在服务器配置的方法给关闭了.也就是说要获取用户openid,地区等信息只能在后台获取. 一下是官方的
-
微信小程序富文本渲染引擎的详解
微信小程序富文本渲染引擎的详解 步骤 把 wxParser 目录放到小程序项目的根目录下 在需要富文本解析的 WXML 内引入 wxParser/index.wxml 在页面 JS 文件内使用 wxParser.parse(options) 方法解析 HTML 内容 在小程序项目根目录的 app.wxss 内引入 wxParser 的默认样式库 wxParser.parse(options) 方法的 options 参数说明 参数名 类型 必填 描述 bind String 是 要绑定的数据名称