快应用-按比例压缩照片及监听手机照片旋转的角度并矫正(亲自实践)

快应用的接口集合

官方文档: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}`)
  }
})

问题集合

一、问题

两个字符串看起来一样、类型一样,判断str1==str2时返回false;

二、原因

字符串可能含有其他特殊字符:换行符(%D)、空格(%20)、(%22xxx%22)...一般不显示。

三、如何判断

encodeURIComponent(str) 可查看字符串完整内容

四、解决

.decodeURI(str)//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
.replace(/\ +/g,"") //去掉空格方法

.replace(/[ ]/g,"")//去掉空格

.replace(/[\r\n]/g,"")//去掉回车换行

.replace(/-/g, '') //去掉"-"号

综上所述,完整版代码:

//等比例压缩图片及矫正图片

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...

你可能感兴趣的:(快应用)