1. 程式人生 > 實用技巧 >小程式 之裁剪上傳圖片

小程式 之裁剪上傳圖片

使用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;
}