小程式 之裁剪上傳圖片
阿新 • • 發佈:2020-10-13
使用we-cropper外掛
地址:https://we-plugin.github.io/we-cropper
一、效果圖
二、程式碼
index.js
import WeCropper from '../../../template/we-cropper/we-cropper.js' import config from '../../../template/we-cropper/config/index' const WATERMARK_FONT = '' const device = wx.getSystemInfoSync() const width = device.windowWidth const height= device.windowHeight - 50 Page({ data: { pageLoading: true, showTopTips: false, 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: config.getThemeColor(), mask: 'rgba(0,0,0,0.8)', lineWidth: 1 } } }, touchStart (e) { this.cropper.touchStart(e) }, touchMove (e) { this.cropper.touchMove(e) }, touchEnd (e) {this.cropper.touchEnd(e) }, getCropperImage () { this.cropper.getCropperImage(function (path, err) { if (err) { wx.showModal({ title: '溫馨提示', content: err.message }) } else { wx.previewImage({ current: '', // 當前顯示圖片的http連結 urls: [path] // 需要預覽的圖片http連結列表 }) } }) }, uploadTap () { const self = this wx.chooseImage({ count: 1, // 預設9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success (res) { const src = res.tempFilePaths[0] // 獲取裁剪圖片資源後,給data新增src屬性及其值 self.cropper.pushOrign(src) } }) }, onLoad() { const { cropperOpt } = this.data this.cropper = new WeCropper(cropperOpt) .on('ready', (ctx) => { console.log(`wecropper is ready for work!`) }) .on('beforeImageLoad', (ctx) => { console.log(`before picture loaded, i can do something`) console.log(`current canvas context:`, ctx) wx.showToast({ title: '上傳中', icon: 'loading', duration: 20000 }) }) .on('imageLoad', (ctx) => { console.log(`picture loaded`) console.log(`current canvas context:`, ctx) wx.hideToast() }) .on('beforeDraw', (ctx) => { console.log(`before canvas draw,i can do something`) console.log(`current canvas context:`, ctx) // 那就嘗試在圖片上加個水印吧 // ctx.drawImage(path, 50, 50, 50, 30) ctx.setFontSize(14) ctx.setFillStyle('#ffffff') ctx.fillText(WATERMARK_FONT, 265, 350) }) }, showTopTips: function () { var that = this; this.setData({ showTopTips: true }); setTimeout(function () { that.setData({ showTopTips: false }); }, 3000); }, bindData(e) { var type = e.currentTarget.dataset.type; this.setData({ [type]: e.detail.value }) }, });
index.wxml
<import src="/template/we-cropper/we-cropper.wxml" /> <view class="cropper-wrapper"> <template is="we-cropper" data="{{...cropperOpt}}" /> <view class="cropper-buttons" style="color: {{cropperOpt.boundStyle.color}}"> <view class="upload btn" bindtap="uploadTap"> 上傳圖片 </view> <view class="getCropperImage btn" style="background-color: {{cropperOpt.boundStyle.color}};" bindtap="getCropperImage"> 生成圖片 </view> </view> </view>
index.wxss
.cropper-wrapper { position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: center; justify-content: center; height: 100%; background-color: #e5e5e5; } .cropper-buttons { display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px; padding: 0 20rpx; box-sizing: border-box; line-height: 50px; } .cropper-buttons .upload, .cropper-buttons .getCropperImage { text-align: center; } .cropper{ position: absolute; top: 0; left: 0; } .cropper-buttons{ background-color: rgba(0, 0, 0, 0.95); } .btn{ height: 30px; line-height: 30px; padding: 0 24rpx; border-radius: 2px; color: #ffffff; }