• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序实现图片裁剪上传(wepy)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

参考https://github.com/we-plugin/we-cropper,在wepy中实现,参考的具体例子是we-cropper/example/cutInside/

项目上传图片时2:3的图片

实现代码如下:

wxss代码:

<style lang="less">
.cropperBox{
background: #fff;
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 100rpx;
z-index: 10;
    .cropper-wrapper{
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-color: #e5e5e5;
}

.cropper-buttons{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
}

.cropper-buttons .upload, .cropper-buttons .getCropperImage{
width: 50%;
text-align: center;
}
.cropper{
position: absolute;
top: 0;
left: 0;
}

.cropper-buttons{
background-color: rgba(0, 0, 0, 0.95);
color: #04b00f;
}
}
</style>

 wxml代码(主要修改是将canvas直接写入,而不是使用组件引入,使用例子中组件方式引入会使得canvas的各种功能不起作用):

<view class="cropperBox">
<view class="cropper-wrapper">
<canvas
class="cropper"
disable-scroll="true"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd"
style="width:{{width}}px;height:{{height}}px;font-weight:bold;"> canvas-id="cropper">
</canvas>
<view class="cropper-buttons">
<view
class="upload"
bindtap="uploadTap">
重新上传
</view>
<view
class="getCropperImage"
bindtap="getCropperImage">
确认
</view>
</view>
</view>
</view>

js代码(对例子中的代码稍微进行了改动):
import wepy from \'wepy\'
import WeCropper from \'@/src/we-cropper.js\' // 文件在we-cropper/example/we-cropper/we-cropper.js
const device = wepy.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
export default class cropper extends wepy.page {
config = {
navigationBarTitleText: \'\'
}
components = {

}

data = {
oimg: \'\',
width,
height,
wecropper: null,
cropperOpt: {
id: \'cropper\',
width,
height,
scale: 2.5,
zoom: 8,
cut: { // 实现2:3比例
x: (width - 200) / 2,
y: (height - 300) / 2,
width: 200,
height: 300
}
}
}
computed = {}
methods = {
touchStart (e) {
this.wecropper.touchStart(e)
},
touchMove (e) {
this.wecropper.touchMove(e)
},
touchEnd (e) {
this.wecropper.touchEnd(e)
},
getCropperImage () {
this.wecropper.getCropperImage((src) => {
if (src) {
// 上传图片逻辑
} else {
console.log(\'获取图片地址失败,请稍后重试\')
}
})
},
uploadTap () {
const self = this

wepy.chooseImage({
count: 1, // 默认9
sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
success (res) {
const src = res.tempFilePaths[0]
// 获取裁剪图片资源后,给data添加src属性及其值
self.wecropper.pushOrign(src)
}
})
}
}
onLoad(option) {
// this.oimg = option.img // 获得需要裁剪的图片(上一个页面选择图片,然后跳转到本页面裁剪,裁剪完上传后,可以保存在全局上getApp().globalData.testimg = 上传的图,其他页面便可以得到裁剪后并上传的图)
      // this.cropperOpt.src = this.oimg
let wecropper = new WeCropper(this.cropperOpt)
.on(\'ready\', (ctx) => {
})
.on(\'beforeImageLoad\', (ctx) => {
wepy.showToast({
title: \'加载中\',
icon: \'loading\',
duration: 20000
})
})
.on(\'imageLoad\', (ctx) => {
wepy.hideToast()
})
.on(\'beforeDraw\', (ctx, instance) => {
})
.updateCanvas()
this.wecropper = wecropper
}
}
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序云开发调用HTTP请求中got第三方库使用失败解决方法发布时间:2022-07-18
下一篇:
小程序 视频播放出来的坑发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap