快應用-按比例壓縮照片及監聽手機照片旋轉的角度並矯正（親自實踐）

快應用的接口集合

官方文檔：https://doc.quickapp.cn/featu...

1.image.getExifAttributes(OBJECT)1040+

image.getExifAttributes({
  uri: 'internal://cache/123.png',
  success: function (data) {
    console.log(`handling success: ${JSON.stringify(data.attributes)}`)
  },
  fail: function (data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

接口image.getExifAttributes(OBJECT)返回的Orientation就是圖片的方向即旋轉的值

Orientation	旋轉角度
‘1’	0
‘3’	180
‘6’	順時針90
‘8’	逆時針90

實時判斷屏幕旋轉的每個角度並對照片進行矯正

let  EXIF  =  decodeURI(data.attributes.Orientation)

console.log('EXIF', EXIF)

switch (EXIF) {

case  '1': params[1].degree = 0; break;

case  '3': params[1].degree =  180; break;

case  '6': params[1].degree =  90; break;

case  '8': params[1].degree =  -90;break;

}

2.image.applyOperations(OBJECT)

該接口可用於等比例壓縮照片以及對照片進行旋轉

image.applyOperations({
  uri: 'internal://cache/123.png',
  operations: [
    {
      action: 'scale',
      scaleX: 0.5,
      scaleY: 0.5
    },
    {
      action: 'crop',
      width: 200,
      height: 200
    },
    {
      action: 'rotate',
      degree: 90
    }
  ],
  quality: 90,
  format: 'webp',
  success: function(data) {
    console.log(`handling success: ${data.uri}`)
  },
  fail: function(data, code) {
    console.log(`handling fail, code = ${code}`)
  }
})

綜上所述，完整版代碼：

//等比例壓縮圖片及矯正圖片

compression(uri) {

image.getImageInfo({

uri:  uri,

success: (data) => {

let  height =  data.height

let  width  =  data.width

console.log('height', height, 'width', width)

console.log('壓縮前', data);

if (height  >  1024  ||  width  >  1024) { //須要壓縮

image.getExifAttributes({

uri,

success: (data) => {

let  params  = [

{

action:  'scale',

scaleX:  1024  /  height,

scaleY:  1024  /  height

},

{

action:  'rotate',

degree:  0

}

]

let  EXIF  =  decodeURI(data.attributes.Orientation)

console.log('EXIF', EXIF)

switch (EXIF) {

case  '1': params[1].degree  =  0; break;

case  '3': params[1].degree  =  180; break;

case  '6': params[1].degree  =  90; break;

case  '8': params[1].degree  =  90; break;

}

console.log('params', params)

image.applyOperations({

uri:  data.uri,

operations:  params,

quality:  90,

format:  'webp',

success: (data) => {

console.log('壓縮後', data)

this.requestFn(data.uri);

image.getImageInfo({

uri:  data.uri,

success: (data) => {

let  height  =  data.height

let  width  =  data.width

console.log('height', height, 'width', width)

console.log('壓縮前', data); } })

},

fail:  function (data, code) {

console.log(`handling fail123, code = ${code}`)

}

})

},

fail:  function (data, code) {

console.log(`handling fail, code = ${code}`)

}

})

} else { //不須要壓縮

 
this.requestFn(uri);

}

},

fail:  function (data, code) {

console.log(`handling fail, code = ${code}`)

}

})

},

參考文章：

1.js獲取圖片的EXIF，解決圖片旋轉問題 --https://www.cnblogs.com/suyua...
1.js兩個字符串明明同樣卻判斷顯示不相等--https://blog.csdn.net/weixin_...
2.JAVASCRIPT中 , 如何把string中的空格字符%20, 接收時要真正的空格, 要如何作???-- https://zhidao.baidu.com/ques...