<code class="hljs javascript copyable" lang="javascript" style="word-wrap: break-word; margin: 0px; padding: 0px;">Component({
</code>
/**
* 組件的屬性列表
*/
properties: {
imgSrc: {
type: 'String',
value: ''
}
},
/**
* 組件的初始數(shù)據(jù)
* imageUrl string 初始化圖片
* cropperW string 縮小圖寬度
* cropperH string 縮小圖高度,
* img_ratio string 圖片比例,
* IMG_W string 原圖高度,
* IMG_H string 原圖高度,
* left string 圖片距離左邊距離,
* top string 圖片距離上邊距離,
* clipW number 默認截取框
*/
data: {
imageUrl: '',
cropperW: '',
cropperH: '',
img_ratio: '',
IMG_W: '',
IMG_H: '',
left: '',
top: '',
clipW: 200
},
/**
* 組件的方法列表
*/
methods: {
//點擊取消
cancel: function () {
var myEventDetail = {} // detail對象，提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項
this.triggerEvent('myevent', myEventDetail, myEventOption)
},
//拖拽事件
move: function ({ detail }) {
this.setData({
left: detail.x * 2,
top: detail.y * 2
})
},
//縮放事件
scale: function ({ detail }) {
console.log(detail.scale)
this.setData({
clipW: 200 * detail.scale
})
},
//生成圖片
getImageInfo: function () {
wx.showLoading({
title: '圖片生成中...',
})
const img_ratio = this.data.img_ratio;
//要截取canvas的寬
const canvasW = (this.data.clipW / this.data.cropperW) * this.data.IMG_W
//要截取canvas的高
const canvasH = (this.data.clipW / this.data.cropperH) * this.data.IMG_H
//要截取canvas到左邊距離
const canvasL = (this.data.left / this.data.cropperW) * this.data.IMG_W
//要截取canvas到上邊距離
const canvasT = (this.data.top / this.data.cropperH) * this.data.IMG_H
// 將圖片寫入畫布
const ctx = wx.createCanvasContext('myCanvas');
//繪制圖像到畫布
ctx.save(); // 先保存狀態(tài) 已便于畫完圓再用
ctx.beginPath(); //開始繪制
ctx.clearRect(0, 0, 1000, 1000)
//先畫個圓
ctx.arc(this.data.clipW / 2, this.data.clipW / 2, this.data.clipW / 2, 0, 2 * Math.PI, false)
ctx.clip();//畫了圓 再剪切 原始畫布中剪切任意形狀和尺寸。一旦剪切了某個區(qū)域，則所有之后的繪圖都會被限制在被剪切的區(qū)域內(nèi)
ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.clipW, this.data.clipW); // 推進去圖片
ctx.restore(); //恢復之前保存的繪圖上下文 恢復之前保存的繪圖上下午即狀態(tài) 可以繼續(xù)繪制
ctx.draw(true, () => {
// 獲取畫布要裁剪的位置和寬度
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.data.clipW,
height: this.data.clipW,
destWidth: this.data.clipW,
destHeight: this.data.clipW,
quality: 0.5,
canvasId: 'myCanvas',
success: (res) => {
wx.hideLoading()
/**
* 截取成功后可以上傳的服務(wù)端直接調(diào)用
* wx.uploadFile();
*/
//成功獲得地址的地方
wx.previewImage({
current: '', // 當前顯示圖片的http鏈接
urls: [res.tempFilePath] // 需要預覽的圖片http鏈接列表
})
}
})
})
}
},
ready: function () {
this.setData({
imageUrl: this.data.imgSrc[0]
})
//獲取圖片寬高
wx.getImageInfo({
src: this.data.imageUrl,
success: (res) => {
console.log('圖片信息', res);
//圖片實際款高
const width = res.width;
const height = res.height;
//圖片寬高比例
const img_ratio = width / height
this.setData({
img_ratio,
IMG_W: width,
IMG_H: height,
})
if (img_ratio >= 1) {
//寬比較大，橫著顯示
this.setData({
cropperW: 750,
cropperH: 750 / img_ratio,
})
} else {
//豎著顯示
this.setData({
cropperW: 750 * img_ratio,
cropperH: 750
})
}
}
})
}
})
復制代碼
|
