iphonx使用 canvas 处理图片,返回图片是原图的一小部分(被裁剪)
changeImage=(e)=>{
e.stopPropagation()
var _this = this
const ctx = Taro.createCanvasContext('firstCanvas')
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['camera'],
success (res) {
Taro.showLoading({
title: '图片处理中',
})
const tempFilePaths = res.tempFilePaths
Taro.getImageInfo({
src:tempFilePaths[0],
success:function(ress){
_this.setState({
canvasWidth:ress.width,
canvasHeight:ress.height
})
setTimeout(function(){
ctx.drawImage(tempFilePaths[0], 0, 0)
ctx.drawImage(waterIcon, 0, 0)
if(ress.height > ress.width){
Taro.hideLoading()
Taro.showToast({
title: '请横屏拍摄',
icon: 'none',
duration: 2000
})
}else{
var time = new Date()
var timeValue = time.getHours()+':'+time.getMinutes()+'\t\t'+time.getFullYear()+'/'+(time.getMonth()+1)+'/'+time.getDate()
ctx.setFontSize(24)
ctx.setFillStyle('#FFFFFF')
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText(timeValue, (ress.width-20), (ress.height-80))
var addressValue = _this.state.address
var addressItem = Math.ceil(addressValue.length/12)
for(let i=0;i<addressItem;i++){
var y = ress.height-50+30*i
ctx.textAlign = 'right';
ctx.textBaseline = 'bottom';
ctx.fillText(addressValue.substring(i*12,(i+1)*12), (ress.width-20), y)
}
ctx.draw(false, function() {
Taro.canvasToTempFilePath({
canvasId: 'firstCanvas',
fileType:'jpg',
success(resss) {
_this.compressPictures(resss.tempFilePath,(compressFile)=>{
_this.setState({
doorImage:compressFile
})
Taro.hideLoading()
})
}
})
})
}
},600)
}
})
}
})
}
//压缩图片
compressPictures=(file,success)=>{
var _this = this
Taro.getFileInfo({
filePath:file,
success (inf) {
var filesize = inf.size/1048576
console.log(filesize,'正在压缩')
if(parseFloat(filesize) > 1){
Taro.compressImage({
src: file, // 图片路径
quality: 80, // 压缩质量
success (res) {
console.log(filesize,'压缩成功')
_this.compressPictures(res.tempFilePath,success)
}
})
}else{
success(file)
}
}
})
}
代码流程:选择图片后 使用canvas添加图片水印后,压缩图片大小至1M,再返回压缩后的图片临时地址问题机型:iphonx问题:1、压缩图片时,大小无法压缩(有时候可以成功) 2、原图处理后,图片被截取部分显示 (必定出现)
备注:目前测试只有 iphonx 机型有问题,其他测试机型均可正常显示