this.crop.pushOrign(tempFilePath)
this.crop.getCropperImage()
.then(function (path) {
})
<miniprogram-cropper id="crop" options="{{cropperOpt}}"></miniprogram-cropper>
<view
class="cropper-buttons"
:style="{ color:cropperOpt.boundStyle.color}">
<view
class="upload btn"
bindtap="uploadTap">
上传图片
</view>
<view
class="getCropperImage btn"
:style="{ backgroundColor: cropperOpt.boundStyle.color }"
bindtap="getCropperImage">
生成图片
</view>
</view>
const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight - 50
Page({
crop: null,
data: {
cropperOpt: {
id: 'cropper',
targetId: 'targetCropper',
pixelRatio: device.pixelRatio,
width,
height,
scale: 2.5,
zoom: 8,
cut: {
x: (width - 300) / 2,
y: (height - 300) / 2,
width: 300,
height: 300
},
boundStyle: {
color: '#ffffff',
mask: 'rgba(0,0,0,0.8)',
lineWidth: 1
}
}
},
uploadTap () {
const self = this
if (this.crop) {
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success (res) {
const src = res.tempFilePaths[0]
self.crop.pushOrign(src)
}
})
}
},
getCropperImage () {
this.crop.getCropperImage()
.then((src) => {
wx.previewImage({
current: '',
urls: [src]
})
})
.catch(() => {
console.log('获取图片地址失败,请稍后重试')
})
},
onLoad () {
this.crop = this.selectComponent('#crop')
}
})