iphonx使用 canvas 处理图片,返回图片是原图的一小部分(被裁剪)
发布于 5 年前 作者 kyin 8013 次浏览 来自 官方Issues
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 机型有问题,其他测试机型均可正常显示

3 回复

麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

我没有iphone X,测试不了,你可以一步一步打印出来看下哪一步出现问题

回到顶部