A Image clipping or scaling, support local or same domain video file screenshot. It's implemented  in canvas.
图片裁剪/等比缩放，支持本地/同域视频文件截图功能 (html5 + canvas)。
画像のクリッピングまたはスケーリング、ローカルまたは同じドメインのビデオのスクショ機能を持つ関数である。キャンバスに実装されている。

- Image cropping: Just set valid cropping options (See [ImageHandlerOptions](#ImageHandlerOptions)), or set valid width and height, the image will be centered and cropped.
- 图片裁剪: 设置裁剪参数即可（见 [MediaFileHandlerOptions](#MediaFileHandlerOptions)）。或者设置有效的`width`和`height`。
- 画像のトリミング: 有効なトリミング オプション ([ImageHandlerOptions](#ImageHandlerOptions) を参照) を設定するか、または有効な幅と高さ何かを設定するだけで、画像が中央に配置されてトリミングされる。

- Proportional scaling: Just set the width or height.
- 等比缩放: 只需设置有效的`width`或者`height`.
- 比例スケーリング: 幅または高さを設定するだけ。

- Video screenshot: Take a picture according to the set `currentTime` of the [VideoHandlerOptions](#VideoHandlerOptions).
- 视频截图: 截取指定时间点`currentTime`的帧，参数见[VideoHandlerOptions](#VideoHandlerOptions).
- ビデオのスクリーンショット: [VideoHandlerOptions](#VideoHandlerOptions) の設定 `currentTime` に従って写真を撮る。

[简体中文](./docs) | [日本語](./docs/ja_JP.md)
[English](../README.md) | [日本語](./ja_JP.md)
[English](../README.md) | [简体中文](./README.md)

## Usage
## 用法
## 使用方

// Crop image or video screenshot
// 图片裁剪或视频截图处理
// 画像をトリミングまたは動画のスクリーンショット

Use in html
在HTML文件中使用
htmlで使用する

## Installation
## 安装
## インストール

## Methods
## 方法/函数
## 関数

Image file compression or cropping function.
图片文件压缩或裁剪函数。
画像ファイルの圧縮またはトリミング関数。

file|`File`/`Blob`/`string`|yes|It's string can only be base64 data.
file|`File`/`Blob`/`string`|yes|为`string`时，必须是base64数据字符串。
file|`File`/`Blob`/`string`|yes|文字列の場合にはbase64データ限定。

options|`ImageHandlerOptions`|no|See [ImageHandlerOptions](#ImageHandlerOptions).
options|`ImageHandlerOptions`|no|详情请见[ImageHandlerOptions](#ImageHandlerOptions).
options|`ImageHandlerOptions`|no|[ImageHandlerOptions](#ImageHandlerOptions)を参照してください。

- @returns `Promise<ImageHandlerResult>` See [ImageHandlerResult](#ImageHandlerResult).
- @returns `Promise<ImageHandlerResult>` 详情请见[ImageHandlerResult](#ImageHandlerResult).
- @returns `Promise<ImageHandlerResult>` [ImageHandlerResult](#ImageHandlerResult)を参照してください。

Image processing or video screenshot processing function.
图片处理或视频截图处理函数。
画像処理または動画のスクリーンショット処理関数。

file|`File`|yes|Image or video file.
file|`File`|yes|图片或视频文件。
file|`File`|yes|画像またはビデオファイル。

options|`MediaFileHandlerOptions`|no|See [MediaFileHandlerOptions](#MediaFileHandlerOptions).
options|`MediaFileHandlerOptions`|no|详情请见[MediaFileHandlerOptions](#MediaFileHandlerOptions).
options|`MediaFileHandlerOptions`|no|[MediaFileHandlerOptions](#MediaFileHandlerOptions)を参照してください。


- @returns `Promise<MediaFileHandlerResult>` See [MediaFileHandlerResult](#MediaFileHandlerResult).
- @returns `Promise<MediaFileHandlerResult>` 详情请见[MediaFileHandlerResult](#MediaFileHandlerResult).
- @returns `Promise<MediaFileHandlerResult>` [MediaFileHandlerResult](#MediaFileHandlerResult)を参照してください。

Video file screenshot processing function.
视频文件截图处理函数。
動画ファイルのスクリーンショット処理関数。

file|`File`|yes|Video file object.
file|`File`|yes|视频文件。
file|`File`|yes|ビデオ ファイル オブジェクト。

options|`VideoHandlerOptions`|no|See [VideoHandlerOptions](#VideoHandlerOptions).
options|`VideoHandlerOptions`|no|详情请见[VideoHandlerOptions](#VideoHandlerOptions).
options|`VideoHandlerOptions`|no|[VideoHandlerOptions](#VideoHandlerOptions)を参照してください。

- @returns `Promise<VideoHandlerResult>` See [VideoHandlerResult](#VideoHandlerResult).
- @returns `Promise<VideoHandlerResult>` 详情请见[VideoHandlerResult](#VideoHandlerResult).
- @returns `Promise<VideoHandlerResult>` [VideoHandlerResult](#VideoHandlerResult)を参照してください。


## Types
## 类型
## タイプ

An options of the [handleImageFile](#handleimagefilefile-options) function.
[handleImageFile](#handleimagefilefile-options)的参数。
[handleImageFile](#handleimagefilefile-options) 関数のオプション。

enableDevicePixelRatio|`boolean`|no|Whether to enable the device pixel ratio, when 2 times, the size of the returned image is x2. Default is `false`.
enableDevicePixelRatio|`boolean`|no|是否启用设备的ratio。设备ratio为2时，将会返回2倍宽高的图片。默认为`false`。
enableDevicePixelRatio|`boolean`|no|デバイスのピクセル比を有効にするかどうか。2倍の場合、返される画像のサイズは`x2`になる。デフォルトは`false`である。

mimeType|`string`|no|Multipurpose Internet Mail Extensions. Default is `image/jpeg`. https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
mimeType|`string`|no|文件的mime类型，默认为`image/jpeg`。https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
mimeType|`string`|no|mimeType、デフォルトは「image/jpeg」である。

isForce|`boolean`|no|When the image width or height is less than the set value, force the target image width or height to be adjusted to the set value. Default is `false`.
isForce|`boolean`|no|当原始图片宽高小于设置宽高时，是否强制缩放图片。默认为`false`。
isForce|`boolean`|no|画像の幅または高さが設定値よりも小さい場合、対象の画像の幅または高さを強制的に設定値に調整するか。デフォルトは`false`である。

perResize|`number`|no|Reduce the width each time. To prevent jagged edges when scaling an image. Default is `500`.
perResize|`number`|no|原始图片与目标图片尺寸相差很大时，一次缩放可能会出现锯齿，所以可采用多次缩放处理，防止锯齿出现。该参数为每次缩放的像素值。默认为`500`。
perResize|`number`|no|画像をスケーリングするときにギザギザのエッジを防ぐため、数回でスケーリングする際、毎回スケーリングするピクセルである。デフォルトは`500`である。

quality|`number`|no|A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored. See [toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL). Default is `0.9`.
quality|`number`|no|处理后返回的图片质量，取值`0-1`。详情请见[toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)。默认为`0.9`。
quality|`number`|no|処理後に返される画質。値の範囲は`0-1`である。詳細については、[toDataURL](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) を参照してください。デフォルトは `0.9` である。

width|`number`|no|The `width` of the processed image. Default is `0`.
width|`number`|no|处理后的图片宽度。默认为`0`。
width|`number`|no|画像の「幅」を設定する。デフォルトは`0`である。

height|`number`|no|The `height` of the processed image. Default is `0`.
height|`number`|no|处理后的图片高度。默认为`0`。
height|`number`|no|画像の「高さ」を設定する。デフォルトは`0`である。

longEdge|`number`|no|The value of long edge. Valid when width and height are `0`. Default is `0`.
longEdge|`number`|no|处理后的图片较长边的像素值，仅在`width`和`height`都为`0`时有效。默认为`0`。
longEdge|`number`|no|画像の長辺を設定する。デフォルトは`0`である。

cropInfo|`OptionsCropInfo`|no|See [OptionsCropInfo](#OptionsCropInfo).
cropInfo|`OptionsCropInfo`|no|详情请见[OptionsCropInfo](#OptionsCropInfo)。
cropInfo|`OptionsCropInfo`|no|[OptionsCropInfo](#OptionsCropInfo)を参照してください。


Data returned of the [handleImageFile](#handleimagefilefile-options) function.
[handleImageFile](#handleimagefilefile-options)的返回值。
[handleImageFile](#handleimagefilefile-options) 関数から返されるデータ。

blob|`Blob`|yes|Image blob data.
blob|`Blob`|yes|图片的Blob数据。
blob|`Blob`|yes|画像ブロブ データ。

data|`string`|yes|Image base64 data.
data|`string`|yes|图片的base64数据。
data|`string`|yes|画像 base64 データ。

width|`number`|yes|The width of the image.
width|`number`|yes|图片宽度。
width|`number`|yes|画像の幅。

height|`number`|yes|The height of the image.
height|`number`|yes|图片高度。
height|`number`|yes|画像の高さ。

type|`string`|yes|The type of the image.
type|`string`|yes|图片mime类型。
type|`string`|yes|画像のタイプ。

size|`SizeInfo`|yes|The size information of the image. See [SizeInfo](#SizeInfo).
size|`SizeInfo`|yes|图片文件大小信息，详情请见[SizeInfo](#SizeInfo)。
size|`SizeInfo`|yes|画像のサイズ情報。 [SizeInfo](#SizeInfo) を参照してください。

url|`string`|yes|A blob url of the image.
url|`string`|yes|图片的Blob本地URL地址。
url|`string`|yes|画像のブロブ URL。

element|`HTMLImageElement`/`HTMLCanvasElement`|yes|`HTMLImageElement` or `HTMLCanvasElement`.
element|`HTMLImageElement`/`HTMLCanvasElement`|yes|`HTMLImageElement`或`HTMLCanvasElement`.
element|`HTMLImageElement`/`HTMLCanvasElement`|yes|`HTMLImageElement`または`HTMLCanvasElement`.

raw|`MediaFileHandlerRawData`|yes|Raw information of the image file being processed. See [MediaFileHandlerRawData](#MediaFileHandlerRawData).
raw|`MediaFileHandlerRawData`|yes|处理之前的图片的数据信息。详情请见[MediaFileHandlerRawData](#MediaFileHandlerRawData)。
raw|`MediaFileHandlerRawData`|yes|元画像の情報。[MediaFileHandlerRawData](#MediaFileHandlerRawData) を参照してください。

An options of the [handleMediaFile](#handlemediafilefile-options) function.
[handleMediaFile](#handlemediafilefile-options)的参数。
[handleMediaFile](#handlemediafilefile-options) 関数のオプション。

See [VideoHandlerOptions](#VideoHandlerOptions).
详情请见[VideoHandlerOptions](#VideoHandlerOptions)。
[VideoHandlerOptions](#VideoHandlerOptions) を参照してください。

Raw information of the image file being processed.
处理之前的图片的数据信息。
処理中の画像ファイルの情報。

Data returned of the [handleMediaFile](#handlemediafilefile-options) function.
[handleMediaFile](#handlemediafilefile-options)的返回值。
[handleMediaFile](#handlemediafilefile-options) 関数から返されるデータ。

videoInfo|`VideoInfo`|no|Video file information. See [VideoInfo](#videoinfo).
videoInfo|`VideoInfo`|no|原始视频文件信息。详情请见[VideoInfo](#videoinfo)。
videoInfo|`VideoInfo`|no|ビデオ ファイル情報。[VideoInfo](#videoinfo) を参照してください。

> It will be ignored when the value is invalid.
> 裁剪参数非有效值时将被忽略。
> 値が無効な場合は無視される。

![canvas-drawimage](./docs/canvas-drawimage.jpg)
![canvas-drawimage](./canvas-drawimage.jpg)
![canvas-drawimage](./canvas-drawimage.jpg)

sx|`number`|yes|The x-axis coordinate of the top left corner of the sub-rectangle of the source `image` to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument.
sx|`number`|yes|x坐标。
sx|`number`|yes|x座標。

sy|`number`|yes|The y-axis coordinate of the top left corner of the sub-rectangle of the source `image` to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument.
sy|`number`|yes|y坐标。
sy|`number`|yes|y座標。

sw|`number`|yes|The width of the sub-rectangle of the source `image` to draw into the destination context. If not specified, the entire rectangle from the coordinates specified by `sx` and `sy` to the bottom-right corner of the image is used. Use the 3- or 5-argument syntax to omit this argument.
sw|`number`|yes|从`sx`坐标开始沿x轴方向的长度。
sw|`number`|yes|`sx` 座標からの x 軸に沿った長さ。

sh|`number`|yes|The height of the sub-rectangle of the source `image` to draw into the destination context. Use the 3- or 5-argument syntax to omit this argument.
sh|`number`|yes|从`sy`坐标开始沿y轴方向的长度。
sh|`number`|yes|`sy` 座標からの y 軸に沿った長さ。


File size information.
文件大小信息。
ファイルサイズ情報。

text|`string`|yes|File size as a string, `1.23MiB` etc.
text|`string`|yes|字符串形式的文件大小，比如`1.23MiB`。
text|`string`|yes|文字列としてのファイルサイズ。例えば`1.23MiB`。

unit|`string`|yes|Unit of file size, `MiB` etc.
unit|`string`|yes|文件大小单位，比如`MiB`。
unit|`string`|yes|ファイルサイズの単位、例えば`MiB`。

value|`number`|yes|The size of the file as a suitable number, without units, `1.23` etc.
value|`number`|yes|数值形式的文件大小，比如`1.23`。
value|`number`|yes|単位なしの適切な数値としてのファイルのサイズ、例えば`1.23`。

bytes|`number`|yes|What is the size of the image in bytes.
bytes|`number`|yes|文件大小字节。
bytes|`number`|yes|画像のサイズ (バイト単位)。

An options of the [handleVideoFile](#handlevideofilefile-options) function.
[handleVideoFile](#handlevideofilefile-options)函数的参数。
[handleVideoFile](#handlevideofilefile-options) 関数のオプション。

currentTime|`number`|no|The `HTMLMediaElement` interface's `currentTime` property specifies the current playback time in seconds. If it is longer than the video duration, the last frame will be captured. The default is a `random` timestamp in the video duration.
currentTime|`number`|no|视频文件的截图时间点。超出视频播放时间时，将截取最后一帧。默认随机截取某一帧。
currentTime|`number`|no|ビデオのスクショを撮る時点。デフォルトは、動画の長さの「ランダムな」タイムスタンプである。

Data returned of the [handleVideoFile](#handlevideofilefile-options) function.
[handleVideoFile](#handlevideofilefile-options)的返回值。
[handleVideoFile](#handlevideofilefile-options) 関数から返されるデータ。

The original video file information.
视频文件信息。
ビデオ ファイル情報。

url|`string`|yes|A blob url of the video file.
url|`string`|yes|视频文件的blob本地URL。
url|`string`|yes|ビデオ ファイルの BLOB URL。

videoFile|`File`|yes|The video file object.
videoFile|`File`|yes|视频文件File对象。
videoFile|`File`|yes|ビデオ ファイル オブジェクト。


videoWidth|`number`|yes|The width of the video.
videoWidth|`number`|yes|视频宽度。
videoWidth|`number`|yes|ビデオの幅。

videoHeight|`number`|yes|The height of the video.
videoHeight|`number`|yes|视频高度。
videoHeight|`number`|yes|ビデオの高さ。

duration|`number`|yes|The duration of the video.
duration|`number`|yes|视频时长。
duration|`number`|yes|ビデオの長さ。

currentTime|`number`|yes|The time point of the video screenshot.
currentTime|`number`|yes|截取图片的时间点位置。
currentTime|`number`|yes|ビデオのスクリーンショットの時点。


## Other methods
## 其他方法函数
## そのほかの関数

These methods's documentation see https://github.com/capricorncd/zx-sml
以下方法的文件请见 https://github.com/capricorncd/zx-sml
下記関数の仕様書は https://github.com/capricorncd/zx-sml を参照してください

<summary>Source Code</summary>
<summary>源代码</summary>
<summary>ソース</summary>

Prop|Types|Required|Description
属性|类型|必须|描述
プロップ|型|必須|説明

Param|Types|Required|Description
参数|类型|必须|描述
パラメータ|型|必須|説明

## License
## License
## ライセンス