open-index/open-npm huggingface dataset:
npm package: @goldenapple/img-upload
Description: angular圖片上傳service工具。
Latest version: 1.1.5
Deprecated: false

# 上傳圖片到 aws S3

`方便將圖片上傳到S3，附加修正EXIF、壓縮功能。`

## 使用方法

    有用到md5-typescript加密檔名。
    npm i md5-typescript

```html
<input type="file" accept="image/*" (change)="uploadFile($event)" />
<input type="file" accept="image/*" (change)="uploadFile2($event)" />
```

```ts
import { ImgUploadService } from '@goldenapple/img-upload';
@Component({
  // ...
})
export class SomeComponent {
  constructor(private ius: ImgUploadService) {
    // 初始化
    this.ius.init('S3 accessKeyId', 'S3 secretAccessKey', 's3-bucket-name', 'public-img/user/');
  }

  /**
   * 上傳修正過EXIF且壓縮後的圖片到aws S3
   * */
  async uploadFile($event) {
    const avatar = [];
    const OUT = [];
    for (let i = 0; i < $event.target.files.length; i++) {
      // 取得修正過EXIF Orientation後的圖片的ObjectUrl
      const objUrl = await this.ius.getFixImgObjUrl($event.target.files[i]);
      avatar.push(objUrl);
    }

    for (let i = 0; i < avatar.length; i++) {
      // 儲存到S3
      const src = await this.ius.objUrlToS3Url(avatar[i]);
      // 等同 src=await this.ius.uploadImageFileToS3(await this.ius.objectUrlToBlob(avatar[i]),true,undefined,true);

      // 釋放記憶體
      if (avatar[i].includes('blob:')) {
        URL.revokeObjectURL(avatar[i]);
      }
      OUT.push(src);
    }
    return OUT;
  }

  /**
   * 上傳原始圖片到aws S3
   * */
  async uploadFile2($event) {
    const OUT = [];
    for (let i = 0; i < $event.target.files.length; i++) {
      // 儲存到S3
      const src = await this.ius.uploadImageFileToS3($event.target.files[i], false, undefined, false);
      OUT.push(src);
    }
    return OUT;
  }
}
```
npm package: @goldenapple/infinite-loading
Description: 無限載入的觸發器。
Latest version: 0.0.3

# 使用方法

.html
<div #infiniteLoadingName="InfiniteLoadingDirective"
  InfiniteLoading
  (infiniteLoadData)="infiniteLoadData()">
    <div class="item" *ngFor="let item of itemList">
        {{ item.title }}
    </div>
    <div class="item" *ngIf="needLoading">
        我是loading動畫
    </div>
</div>

.ts
itemList=[];
needLoading=true;
@ViewChild("infiniteLoadingName") infiniteLoadingName: InfiniteLoadingDirective;
infiniteLoadData() {
    if (!this.needLoadingneedLoading) {
        return;
    }
    // TODO: 需要載入新資料
    this.itemList.push(data);
    // TODO: 需要判斷後續是否還有資料
    this.needLoading=false;
}
npm package: @goldenapple/liff-extend
Description: line的liff用的東西
Latest version: 2.0.4

# LiffExtend

在 angular 中更方便的使用 liff。

## 新增 service 到 component

```ts
import { LiffExtendService } from '@goldenapple/liff-extend';
@Component({
  // ...
})
export class SomeComponent implements OnInit {
  constructor(private liff: LiffExtendService) {
    this.liff.init('1612312312-97ooOOoY').then(async () => {
      const profile = await this.liff.getProfile();
      // ...
    });
  }
}
```

## 使用

```ts
// 參考:https://developers.line.biz/en/reference/liff/
// 初始化
await this.liff.init('1612312312-97ooOOoY');
// 取得使用者資料
const profile = await this.liff.getProfile();
// line id
this.userId = profile.userId;
// line name
this.displayName = profile.displayName;
// 大頭照
this.pictureUrl = profile.pictureUrl;
// 狀態訊息
this.statusMessage = profile.statusMessage;

// 判斷是否在liff裡，大部分的function都必須在liff才能使用
if (this.liff.isInClient()) {
  // 傳送訊息 內容參考:https://developers.line.biz/en/reference/liff/#send-messages
  this.liff.sendMessages([
    // ...
  ]);
  // 關閉視窗
  this.liff.closeWindow();

  // 掃描QR code
  let result = await this.liff.scanCode();
}

// 登入
if (!this.liff.isLoggedIn()) {
  this.liff.login();
}
```