qf-image-cropper2.0
画像トリミングプラグイン
1. エフェクトのプレビュー:
2. プラットフォームのサポート:
1. WeChatアプレットをサポート（モバイル端末、PC端末、開発者ツール）
2. H5 プラットフォーム (バージョン 2.1.0 以降)
3. サポート APP プラットフォーム (バージョン 2.1.5 以降): Android、IOS
4. 他のプラットフォームとの互換性はまだテストされていないため不明
3. サポート機能:
1. カスタムトリミングサイズ
2. 固定小数点比例スケーリング: モバイル端末は 2 本指タッチの中心点をズーム中心点として使用し、PC 端末はマウスが置かれている点をズーム中心点として使用します。フリードラッグ：
境界線からはみ出す制限スライドをサポートし、リバウンド効果もサポートします（スライドすると境界線から滑り出し、放すと境界線にリバウンドすることができます） 4.画像反転：トリミングサイズが1以外の
場合:1、反転時に幅と高さがトリミング領域をカバーできない場合、画像は自動的に適切なサイズに拡大されます。
5. トリミングして新しい画像を生成します。
6. 画像をローカルに
選択します。 7. カスタマイズ可能なスタイル: 自由に選択できます。トリミング境界線、スケーラブルなトリミング上部コーナー、基準線をレンダリングします。
8. 画像の丸いコーナーのトリミング: 円、丸みを帯びた長方形
4. 属性の説明
| 属性名 |
タイプ |
デフォルト |
説明する |
| 送信元 |
弦 |
画像リソースのアドレス |
|
| 幅 |
番号 |
300 |
クロップ幅 |
| 身長 |
番号 |
300 |
クリッピング高さ |
| ボーダーを表示 |
ブール値 |
真実 |
クリッピングエリアの境界線を描画するかどうか |
| ショーグリッド |
ブール値 |
真実 |
クリッピングエリアのグリッドガイドを描画するかどうか |
| showAngle |
ブール値 |
真実 |
ストレッチ対応の四隅を表示するかどうか |
| 面積スケール |
番号 |
0.3 |
トリミング領域の最小ズーム率 |
| マックススケール |
番号 |
5 | 画像の最大ズーム倍率 |
| 跳ねる、弾む |
ブール値 |
真実 | リバウンド効果があるかどうか: ドラッグすると境界の外にドラッグでき、放すと境界に戻ります。 |
| 回転可能 |
ブール値 |
真実 | 反転をサポートするかどうか |
| 選択可能な |
ブール値 |
真実 | 現地からの材料選択をサポートするかどうか |
| 角度サイズ |
番号 |
20 | 四隅のサイズ、単位px |
| 角度境界線の幅 |
番号 |
2 | 四隅の境界線の幅、単位 px |
| 半径 |
番号 |
トリミング画像フィレット半径、単位 px |
|
| ファイルの種類 | 弦 | png | 生成されるファイルのタイプは、「jpg」または「png」のみがサポートされます。デフォルトは「png」です |
| 遅れ | 番号 | 1000 | 描画から画像の生成までに必要な時間 (ミリ秒)。WeChat アプレット プラットフォームは、「Canvas 2D」を使用して描画する場合に効果的です。<br> 大きな画像を描画する場合、または空白のトリミングされた画像がある場合は、 「Canvas 2d」は同期描画を採用しているため、描画完了時間を自分で制御する必要があります。 |
| ナビゲーション | ブール値 | 真実 | ページがネイティブ タイトル バーかどうか:<br>H5 プラットフォームで showAngle が true の場合、プラグインを使用するページが `page.json` の `"navigationStyle": "custom"` で設定されている場合、この値はfalse に設定しないと、伸縮四隅のトリガー位置がずれます。<br>注: H5 プラットフォームのウィンドウの高さにはタイトル バーが含まれるため、画面上のタッチ ポイントの座標にはタイトル バーは含まれません。 |
| @作物 |
イベントハンドル |
トリミングの完了後にトリガーされます (event = { tempFilePath })。H5 プラットフォームでは、tempFilePath は Base64 です。 |
5. プラグインの導入
プロジェクトコード: Homilier/qf-image-cropper · GitCode
HBuilder X を使用してプロジェクトをインポートする:画像トリミング プラグイン - DCloud Plugin Market
6. 基本的な使い方
<template>
<div>
<qf-image-cropper :width="500" :height="500" :radius="30" @crop="handleCrop"></qf-image-cropper>
</div>
</template>
<script>
import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
export default {
components: {
QfImageCropper
},
methods: {
handleCrop(e) {
// 保存到相册
uni.saveImageToPhotosAlbum({
filePath: e.tempFilePath
})
}
}
}
</script>7. 使用上の注意
1. パフォーマンスやページのジッターなどの問題を防ぐために、「pages.json」のプラグインを参照するページに構成を追加して、プルダウン更新とページ スライドを禁止することをお勧めします。
{
"enablePullDownRefresh": false,
"disableScroll": true
}2. 本プラグインを使用する場合、ターゲット画像サイズは幅、高さともに大きすぎず、1365x1365以内を推奨します。設定しない場合、以下の問題が発生する可能性があります。
1. インターフェイスが固まり、メモリ使用量が多すぎる
2. 生成された画像が歪む (ぼやける)
3. トリミングを確認した後、常に「トリミング中...」と表示される この問題は `uni' が原因で発生します。 CanvasToTempFilePath` はコールバックできません。プラットフォームやデバイスが異なると、制限が異なる場合があります。
3. トリミングされた画像にオフセットの問題がある場合は、プロジェクトの親コンポーネントまたはグローバル スタイルの影響を受けていないか確認してください。
4. src 属性がネットワーク画像に設定されている場合、画像リソースは、プラグインのトリミングに使用する前に、`getImageInfo` API の成功コールバックをトリガーできる必要があります。したがって、ミニ プログラム プラットフォームは、ネットワーク イメージ情報を取得して有効にする前に、ダウンロード ドメイン名のホワイトリストを構成する必要があります。
8. その他の注意事項
1. この 2.0 バージョンは、以前の 1.0 バージョンに基づいてリファクタリングされています。
2. uniapp をアプレットにコンパイルした後、レイアウトが乱れている場合は、再コンパイルしてください。
現時点では、uniapp には `<script lang="wxs" ></script>` のコンパイルにまだ問題がある可能性があります。場合によっては、外部からインポートされた wxs が生成されたコードに正しくコンパイルされず、参照が未定義になることがあります。
3. ネイティブ WeChat アプレットのプラグインを使用するにはどうすればよいですか?
現時点で最も便利な解決策は、uniapp を使用して空のプロジェクトを作成し、プラグインをインポートして小さなプログラムにコンパイルし、生成されたコード内の common ディレクトリと uni_modules ディレクトリを独自のプロジェクトにコピーして、 app.js ファイル uni_modules ディレクトリ内のコンポーネントをネイティブ コンポーネントとして使用するには、数行のコードを独自のプロジェクトの対応するファイルにコピーします。