由于業(yè)務(wù)要求上傳證書的功能辟汰，即上傳圖片烛恤，做一下筆記；
tool是我自己封裝的微信小程序接口冻河，具體實現(xiàn)看微信小程序或Taro官方文檔箍邮；req開頭的函數(shù)也是我自己封裝的網(wǎng)絡(luò)請求茉帅；不能夠直接復(fù)制運行叨叙。
界面需要三個東西 上傳圖片的按鈕，選擇的按鈕堪澎，以及上傳圖片后的圖片展示擂错。
//選擇圖片的按鈕
<Image src={btn} mode='widthFix' className='phone-btn' onClick={this.chooseImage} />
//圖片展示
<Image src={ this.state.tempFilePaths} style={{width:'100%'}} mode='widthFix'/>
//確認上傳圖片的按鈕
<Button onClick={this.uploadFile}>確認上傳證書</Button>
選擇圖片函數(shù)chooseImage
chooseImage = () => {
Taro.chooseImage({
count: 1,
sizeType: ['original','compressed'],
sourceType: ['album','camera'],
success: (res) => {
tool.showInfo('正在上傳...','loading')
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
let tempFilePaths = res.tempFilePaths;
this.setState({
tempFilePaths: tempFilePaths[0],
},()=>{
console.log(tempFilePaths);
})
}
})
}
上傳圖片函數(shù)uploadFile
uploadFile=async ()=>{
let res = await reqUploadCert (this.state.tempFilePaths, 'triCertificate')
console.log('uploadFile',res)
let response = JSON.parse(res.data)
console.log(response);
if(response.code === 10000){
console.log('上傳成功')
tool.showInfo('上傳成功')
setTimeout(()=>{
this.setState({
showUpload :false,
tempFilePaths:''
},()=>{
this.getCertList()
})
},100)
}else{
tool.showInfo('上傳失敗')
}
}
當(dāng)圖片上傳成功后樱蛤，我們需要展示在頁面上钮呀，沒上傳圖片之前，需要留白高度400rpx的View昨凡，好看些爽醋。
{
this.state.tempFilePaths ?<Image src={ this.state.tempFilePaths} style={{width:'100%'}} mode='widthFix'/>
: <View style={{width:'100%',height:'400rpx'}}></View>
}
業(yè)務(wù)中另外的上傳圖片功能需要壓縮圖片，這一塊我做了很久便脊，（現(xiàn)在還是不會圖片的裁剪蚂四，會做時補充上來）
//壓縮圖片
chooseWxImage = () => {
//選擇圖片
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
console.log('選擇圖片=>', res.tempFilePaths[0])
Taro.getImageInfo({
src: res.tempFilePaths[0],
success: (res) => {
console.log('getImageInfo=>res', res)
console.log('getImageInfo=>', res.path)
let originW = res.width
let originH = res.height
//壓縮比例
//最大尺寸限制，這里我不知道為什么規(guī)定的320和420無法壓縮到對應(yīng)的值哪痰，只好/3試試遂赠，發(fā)現(xiàn)可以
let maxW = 320 /3
let maxH = 420 /3
//目標(biāo)尺寸
let targetW = originW
let targetH = originH
if (originW > maxW || originH > maxH) {
if (originW / originH > maxW / maxH) {
// 要求寬度*(原生圖片比例)=新圖片尺寸
targetW = maxW;
targetH = Math.round(maxW * (originH / originW));
} else {
targetH = maxH;
targetW = Math.round(maxH * (originW / originH));
}
}
//嘗試壓縮文件，創(chuàng)建 canvas
let ctx = Taro.createCanvasContext('firstCanvas');
ctx.clearRect(0, 0, targetW, targetH);
console.log(res.path, targetW, targetH)
ctx.drawImage(res.path, 0, 0, targetW , targetH );
ctx.draw();
//設(shè)置canvas的長寬
this.setState({
cw: targetW ,
ch: targetH
})
setTimeout(()=>{
Taro.canvasToTempFilePath({
canvasId: 'firstCanvas',
width:targetW ,
height : targetH ,
success: (res) => {
console.log('畫布信息=>', res)
console.log('畫布信息=>', res.tempFilePath)
Taro.getImageInfo({
src : res.tempFilePath ,
success : (res)=>{
console.log('壓縮后的res',res)
}
})
this.setState({
tempFilePaths: res.tempFilePath,
hidden: true,
isChanged: true
})
Taro.setStorageSync('userImage',res.tempFilePath)
}
})
},500)
}
})
}
})
}
使用Canvas才能得到壓縮后的圖片
const style = {height: this.state.ch + 'px', width: this.state.cw + 'px', marginLeft: -this.state.cw / 2 + 'px'}
<View style={style} className='hiddenCanvas'>
<Canvas className='canvas' canvasId="firstCanvas" style={style} />
</View>
.canvas{
position: absolute;
top: 0;
left:50%;
z-index: -1;
}
.hiddenCanvas{
position: fixed;
top: 9999rpx; //把canvas移出屏幕
}
顯示部分與上傳圖片類似晌杰，不贅述跷睦，當(dāng)有底圖的情況下，不用留白一個View的位置肋演，直接使用底圖即可抑诸。
state={
...
tempFilePaths: require('../../../images/apply/background.png'),
}
<View>
<Image src={this.state.tempFilePaths} style='width: 100%;' mode='widthFix' className='phone-bgc'/>
</View>
