blog

モバイルPCフレンドリーの強力なビュー画像切り抜きプラグイン

コンポーネントを使用している場合、幅と高さは親ラベルに従いますので、親ラベルの幅と高さを設定する必要があります。 このとき、次の3つのコンポーネントが登録されます。 コンポーネント:,,......

Apr 7, 2020 · 15 min. read
シェア

vue-picture-cut 2.x

vueとtypescriptをベースにしたイメージ切り抜き処理ツールの開発

利点：ネイティブ、軽量、使いやすい、フル機能、拡張可能

現在の機能：ズーム、折りたたみ、回転、エッジチェック、矩形切り抜き、任意円切り抜き

ズームについて：マウス、タッチスクリーン







github

使い方

npm経由でプラグインをインストール

npm install vue-picture-cut

vueで使う

1、main.jsのグローバル・リファレンスで

import Vue from 'vue';
import 'vue-picture-cut/lib/vue-picture-cut.css';
import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);

2、または.vueファイル内で個別に参照

<template>
 <div>
	<input type="file" accept="image/*" @change="inputChange"/>
 <vue-picture-cut :src="src" @on-change="cutChange"/>
 </div>
</template>
<script>
 import { VuePictureCut } from 'vue-picture-cut';
 export default {
 // ...
 components: {
 VuePictureCut
 },
 data () {
 return {
 src: null,
 blob: null,
 base64: null
 }
 },
 methods: {
 inputChange(e) {
 const file = e.target.files[0];
 this.src = URL.createObjectURL(file);
 },
 /**
 * @param blob BLOB 
 * @param base64 base64 
 */
 cutChange({ blob, base64 }) {
 this.blob = blob;
 this.base64 = base64;
 }
 }
 // ...
 }
</script>
<style>
 @import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>

3.注意

コンポーネントが使用されているとき、幅と高さは親ラベルに従いますので、親ラベルの幅と高さを設定する必要があります。

API

露出オブジェクト

グローバル・イントロダクション

import VuePictureCut from 'vue-picture-cut';
Vue.use(VuePictureCut);

独立参照

import {
 VuePictureCut,
 VuePictureCutMask,
 VuePictureCutMenu,
 Bezier,
 createAnimation,
 Tool,
 createUtils
} from 'vue-picture-cut';

コンポーネント：VuePictureCut、VuePictureCutMask、VuePictureCutMenu。 ツール：Bezier、createAnimation、Tool、createUtils。

VuePictureCutコンポーネント

スロットスロット： デフォルト、メニュー

ご利用ください：



demo

<template>
 <vue-picture-cut
 ref="pictureCut"
 :src="src"
 :magnification="magnification"
 :init-angle="initAngle"
 :msk-option="mskOption"
 :max-pixel="maxPixel"
 :encoder-options="encoderOptions"
 :format="format"
 :rotate-control="rotateControl"
 :menu-position="menuPosition"
 :menu-thickness="menuThickness"
 :background-color="backgroundColor"
 @on-change="onChange"
 />
</template>

属性：

  1. src：

    タイプ: string

    デフォルト：null

    説明：イメージへのリンク
  2. 倍率

    タイプ: 数字

    デフォルト：1.5

    説明：キャンバスの描画倍率、値は0より大きく、値が大きいほど論理ピクセルが高く描画されます。
  3. initAngle：

    タイプ: 数

    必須: 不要

    説明: 読み込まれたイメージの初期回転角度
  4. maxPixel：

    タイプ: 数

    必須：不要

    説明: エクスポートされたイメージのハイサイドとワイドサイドの長い方のピクセル、送信されない場合、イメージの実際のサイズに応じて適応されます。
  5. エンコーダオプション

    タイプ: 数

    必須: 不要

    説明: エクスポートイメージの圧縮率、転送されない時は0.8で計算されます、値の範囲は0~1です。
  6. フォーマットで指定します：

    タイプ: string

    デフォルト：false

    説明：書き出されるイメージのフォーマット。フォーマットは "image/jpeg"、値は "image/png "又はブラウザがサポートする他のフォーマット。
  7. rotateControl：

    タイプ: boolean

    デフォルト：false

    説明: 回転コントロールを表示するか否か。
  8. メニューの厚さ

    タイプ: 数

    必須: 不要

    説明: menuPosition が top または bottom の場合のメニューバーの高さ、menuPosition が left または right の場合のメニューバーの幅、値が 0 より大きく 0 に等しい場合はメニューバーを非表示。
  9. backgroundColor：

    タイプ: string

    必須：不要

    説明: コンポーネントの背景色。

イベント

  1. { width: 1, height: 1, isRound: false, resize: true}書き出されたイメージの最終的な切り抜きイベントをリスンします。

    blob: エクスポートされたイメージのblobオブジェクト。

    base64: エクスポートされたイメージのbase64文字列。

方法：

  1. onChange ({ blob, base64 })ズームイメージ

    パラメータ zoom: ズームされたサイズと現在のサイズの比率、0より大きい値を取り、0と1の間でズームアウト、1より大きい値でズームイン。

VuePictureCutMask コンポーネント

VuePictureCutMaskはVuePictureCutのデフォルトのスロットコンポーネントで、マスクのクロップボックスの制御に関連するコンポーネントです。

ご利用ください：

<template>
 <vue-picture-cut
 :src="src"
 :magnification="magnification"
 :init-angle="initAngle"
 :rotate-control="rotateControl"
 :max-pixel="maxPixel"
 :encoder-options="encoderOptions"
 :format="format"
 :background-color="backgroundColor"
 @on-change="onChange"
 >
 <vue-picture-mask
 :width="width"
 :height="height"
 :is-round="isRound"
 :resize="resize"
 :color="color"
 :border-color="borderColor"
 />
 </vue-picture-cut>
</template>

属性：

  1. 幅

    タイプ: number

    デフォルト: 1

    説明：クロップボックスのプロポーショナル幅。
  2. 高さ

    タイプ: number

    デフォルト: 1

    説明: クロップフレームのスケールの高さ
  3. isRound：

    タイプ: boolean

    デフォルト: false

    説明: 矩形は真、楕円は偽
  4. リサイズ

    タイプ: boolean

    デフォルト：false

    説明: サイズをドラッグしてクロップボックスのサイズを変更できるかどうか。
  5. 色

    タイプ: 文字列

    必須：不要

    説明: マスクの色
  6. borderColor：

    タイプ: string

    必須：不要

    説明：切り取り枠の色

VuePictureCutMenu コンポーネント

メニューバーコンポーネント、効果についてはデモをご覧ください。

ご利用ください：

/demo/demo4.html

/デモ5.html

<template>
 <vue-picture-cut
 :src="src"
 :magnification="magnification"
 :init-angle="initAngle"
 :rotate-control="rotateControl"
 :msk-option="mskOption"
 @on-change="cutChange"
 >
 <vue-picture-menu
 slot="menu"
 :cancel="false"
 :max-pixel="maxPixel"
 :encoder-options="encoderOptions"
 :format="format"
 :theme="theme"
 confirm-name="Ok"
 cancel-name="Cancel"
 size-auto-name="auto"
 size-raw-name="raw"
 menu-rotate-name="Rotate"
 @on-change="onChange"
 @on-cancel="onCancel"
 />
 </vue-picture-cut>
</template>

属性：

  1. キャンセル

    タイプ: boolean

    デフォルト：false

    説明: キャンセルボタンを表示するかどうか。
  2. maxPixel：

    タイプ: 数

    必須：不要

    説明: エクスポートされたイメージのハイサイドとワイドサイドの長い方のピクセル、送信されない場合、イメージの実際のサイズに応じて適応されます。
  3. エンコーダオプション

    タイプ: 数

    必須: 不要

    説明: エクスポートイメージの圧縮率、転送されない時は0.8で計算されます、値の範囲は0~1です。
  4. フォーマットで指定します：

    タイプ: string

    デフォルト：false

    説明：書き出されるイメージのフォーマット。フォーマットは "image/jpeg"、値は "image/png "又はブラウザがサポートする他のフォーマット。
  5. テーマ

    タイプ: 文字列

    default: 'default'

    説明: メニューバーのテーマ。値: 'default', 'dark', 'grey'
  6. confirmName：

    タイプ: string

    デフォルト：'OK'

    説明: 確認ボタンのテキスト
  7. cancelName：

    タイプ: string

    デフォルト：'cancel'

    説明: キャンセルボタンのテキスト
  8. sizeAutoName：

    タイプ: string

    デフォルト: 'auto'

    説明: メニューバーボタンのテキスト
  9. sizeRawName：

    型: string

    デフォルト：'raw'

    説明: メニューバーボタンのテキスト
  10. menuRotateName：

    タイプ: string

    デフォルト: 'Rotate'

    説明: メニューバーボタンのテキスト
  11. ルート

    タイプ：オブジェクト

    Must: スロットを介して外部で使用しない場合は必ず渡さなければなりません。

    説明: VuePictureCutインスタンスの値を取ります。

イベント

  1. onChange ({ blob, base64 }): エクスポートされたイメージの最終的なトリミング、つまり確認ボタンをクリックするイベントをリスンします。

    blob: エクスポートされたイメージのblobオブジェクト。

    base64: エクスポートされたイメージのbase64文字列。

  2. onCancel()：キャンセル・ボタンのクリックをリッスンします。

ベジェオブジェクト

 import { Bezier } from 'vue-picture-cut';
 const bezier = Bezier();
 bezier.setOpt(Bezier.BEZIER['ease-in-out']);
 const y = bezier.getPoint(0.5);
 console.log(y);
静的属性のBEZIERは、いくつかのプリセット値を含むキーと値のペアです。
リニア [0.0, 0.0, 1.0, 1.0] 線形遷移
ease [0.25, 0.1, 0.25, 1.0] スムーズな移行
ease-in [0.42, 0, 1.0, 1.0] ゆっくりから速く
setOpt [0, 0, 0.58, 1.0] 速いから遅いへ
ease-in-out [0.42, 0, 0.58, 1.0] スロー→ファスト→スロー。
コンストラクタ

setOptByString('ease')パラメータなしのコンストラクタ。

メソッド
setOpt ベジェ曲線タイプの設定 ベジェオブジェクトそのもの
setOptByString ベジェ曲線タイプの設定 BEZIER ベジェオブジェクトそのもの
setOptByArr ベジェ曲線タイプの設定 ベジェオブジェクトそのもの
ゲットポイント getPoint 0から1の間 0~1
パラメータ ParamsInterface 説明

ParamsInterface は、4 つの数値型を含む配列です。

createAnimation メソッド

 import { createAnimation } from 'vue-picture-cut';
 const animation = createAnimation(option);

createAnimation は Animation オブジェクトを返します。

パラメータオプション
対応y座標，0~1 アニメーション時間（ミリ秒 -- -- false 0010
delay アニメーションの遅延時間（ミリ秒単位 number -- false 0
direction アニメーションがループの中で逆方向に動くかどうか 列 normal（デフォルト、順方向）、reverse（逆方向）、alternate（順方向、次に逆方向、交互）、alternate-reverse（逆方向、次に順方向、交互）。 false normal
change 0から1の間のパラメータxを受け取るコールバック関数。 Function -- false --
false アニメーションの最後に実行されるコールバック関数。 delay -- false --
Animationオブジェクトメソッド
false アニメーション開始 -- アニメーションオブジェクト
-- ストップアニメーション -- --

ツールオブジェクト

 import { Tool } from 'vue-picture-cut';
 Tool.loadImg('http://..xxx/.jpg')
 .then(image => {
 // イメージの読み込みに成功
 // imageイメージオブジェクト用
 }, () => {
 // イメージの読み込みに失敗した
 });
メソッドが含まれています

  1. loadImg (src: string): Promise<HTMLImageElement>

    説明: イメージの読み込み

    引数 src: イメージへのリンク

    リターンプロミス: 省略

  2. rotatePoint(x: number, y: number, angle: number): Point

    説明：原点を中心に角度度回転した後の新しい点の座標を計算します。

    パラメータ x: 点の x 座標

    パラメータ y: 点の y 座標

    パラメータ angle: 回転角度

    return Point: {x: 数, y: 数} 新しい点。

  3. clipBy (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg', pathDone?: PathDone): string

    説明：座標に応じてイメージを切り出します。

    パラメータ img: イメージオブジェクト

    パラメータ width: エクスポートされるイメージの幅

    パラメータ height: 書き出されるイメージの高さ

    パラメータ showRect: RectFullオブジェクト

    パラメータ encoderOptions: 圧縮率

    parameter format: エクスポートイメージのフォーマット 'image/jpeg', 'image/png', etc.

    パラメータ pathDone: カスタムパスメソッド PathDone

    戻り値 String: base64

  4. clipByRound (img: HTMLImageElement, width: number, height: number, showRect: RectFull, encoderOptions = 0.8, format = 'image/jpeg'): string

    説明: base64 を blob オブジェクトに変換します。

    パラメータ base64: 省略

    パラメータ format: base64 のフォーマット

    return Blob | null: Blob オブジェクトまたは null を返します。

  5. clipByMax (img: HTMLImageElement, max = 2000, encoderOptions = 1): ClipResult | void

    説明：正方形矩形の内側の楕円を角度度だけ回転させ、その外側の正方形矩形を計算します。

    パラメータ w: 正方形の初期幅

    パラメータ h: 正方形の初期高さ

    パラメータ angle: 反時計回りの回転角度

    return Rect: Rect オブジェクトを返します。

  6. base64ToBlob (base64: string, format = 'image/jpeg'): Blob | null

    説明：正方形の矩形を角度度単位で回転させ、その外側の正方形の矩形を計算します。

    パラメータ w: 正方形の初期幅

    パラメータ h: 初期正方形長方形の高さ

    パラメータ angle: 反時計回りの回転角度

    return Rect: Rect オブジェクトを返します。

CreateUtils メソッド

<template>
 <div>
	<input type="file" accept="image/*" @change="inputChange"/>
 <vue-picture-cut ref="pictureCut" :src="src"/>
 <button @click="doCut"> </button>
 </div>
</template>
<script>
 import { VuePictureCut, createUtils } from 'vue-picture-cut';
 export default {
 // ...
 components: {
 VuePictureCut
 },
 data () {
 return {
 utils: null,
 src: null,
 blob: null,
 base64: null
 }
 },
 mounted() {
 this.utils = createUtils(this.$refs['pictureCut']);
 },
 methods: {
 inputChange(e) {
 const file = e.target.files[0];
 this.src = URL.createObjectURL(file);
 },
 doCut() {
 const res = this.utils.cut();
 if (res) {
 this.blob = res.file; // BLOB 
 this.base64 = res.src; // base64 
 }
 }
 }
 // ...
 }
</script>
<style>
 @import "~vue-picture-cut/lib/vue-picture-cut.css";
</style>
メソッドが含まれています

  1. cut(maxPixel?: number, encoderOptions?: number, format?: string): ClipResult | null

    説明：クロップ

    パラメータ maxPixel: エクスポートされたイメージの長い方のピクセル、送信されない場合、イメージの実際のサイズに応じて適応されます。

    パラメータ encoderOptions: 圧縮率。

    パラメータ format: 'image/jpeg'、'image/png'など、書き出されるイメージのフォーマット。

    return ClipResult | null: 省略。

  2. cut(opt?: { maxPixel?: number, encoderOptions?: number, format?: string }): ClipResult | null

    説明: 切り抜き

    parameter opt.maxPixel: the pixel of the longer side of the width of the exported image, or the pixel of the longer side of the exported image, or the pixel of the longer side of the exported image, or the pixel of thelongerside of the exported image if it is not transmitted.

    パラメータ opt.encoderOptions: 圧縮率。

    パラメータ opt.format: 'image/jpeg'、'image/png'などのエクスポートイメージのフォーマット。

    戻り値 ClipResult | null: 省略

  3. setMaskRound(isRound = true): void

    説明：クロップボックスの形状を設定します。

    引数 isRound: true , false.

  4. setMaskSize(w: number, h: number): void

    説明：クリッピングボックスのサイズを設定します。

    パラメータw：スケール幅

    パラメータh：スケールの高さ

  5. setMaskSizeToOriginal (): void

    説明：イメージの幅と高さの比率に応じて、トリミングボックスのサイズを設定します。

  6. setMaskResize (resize = true): void

    説明：ボックスをドラッグしてサイズを変更できるかどうかを設定します。

    パラメータ resize：省略

  7. rotate (angle: number, animation = false): number | void

    説明：写真回転

    パラメータ角度：反時計回りの角度

    パラメータ animation: アニメーションが実行されるかどうか

    return number | null: 回転したイメージの反時計回りの角度。

  8. rotateTo (angle: number, animation = false): void

    説明: 指定した角度でイメージを回転します。

    パラメータ angle: 反時計回りの角度

    パラメータ animation: アニメーションを行うかどうか

  9. setFlipV(animation?: boolean): boolean | void

    説明：イメージを垂直方向に反転します。

    引数 animation: アニメーションが実行されるかどうか。

    return boolean | null: 元のイメージと比較してイメージが反転するかどうか、true または false。

  10. setFlipH(animation?: boolean): boolean | void

    説明：イメージを水平に反転します。

    引数 animation: アニメーションを行うかどうか。

    return boolean | null: 元のイメージと比較してイメージが反転するかどうか、true または false。

  11. setFlip (sV: boolean, sH: boolean, animation?: boolean): void

    説明：イメージを反転

    パラメータ sV: 垂直, true , false.

    パラメータ sH: 水平, true, false.

    パラメータ animation: アニメーションかどうか

  12. scale(zoom: number): void

    説明：写真ズーム

    パラメータズーム：ズーム倍率

  13. リセット(): void

    説明: イメージの状態をリセット

  14. reset(): void

    説明: コンポーネント内の現在の状態を取得するパラメータです。

    戻り値: CutOptions | null: 省略。

内部オブジェクトの説明

カスタム拡張機能

カスタム切り抜き

カスタムメニューバー

Ⅲ、皆さんに使っていただけると嬉しいです。

VuePictureCut あなた！

Read next

SurfaceFlinger起動プロセス解析

上記からわかるように、所属するクラスはmainで、zygoteと同じレベルです。しかし、これはパラメータで始める必要はありません。同時に、サービスであるため、独立した実行可能ファイルであり、プログラムパスは...

Apr 7, 2020 · 8 min read

プロキシ - オブジェクトにインターセプトのレイヤーを追加する

Apr 7, 2020 · 4 min read

分割、バックトラック、BFS＆DFS、貪欲、二分探索

Apr 7, 2020 · 3 min read

JSオブジェクトの基本的な使い方

Apr 7, 2020 · 1 min read

SAP CRM WebClient UI の割り当てブロックを表示するかどうかを動的に制御する 3 つの方法

Apr 6, 2020 · 2 min read

Mysqlバイナリログのリカバリ

Apr 6, 2020 · 1 min read