-
-
-
-
-
- @if (DefaultButton)
- {
-
-
-
-
- }
- @if (Preview)
- {
-
@PreviewTitle
-
- }
-
-
-
-
+
+
-
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs
index 3461e75..4378232 100644
--- a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs
@@ -1,138 +1,52 @@
-// **********************************
-// Densen Informatica 中讯科技
-// 作者：Alex Chow
-// e-mail:zhouchuanglin@gmail.com
-// **********************************
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
-using System.Diagnostics.CodeAnalysis;
-using System.Text.RegularExpressions;
namespace BootstrapBlazor.Components;
///
/// 视频播放器 ImageCropper 组件
///
-public partial class ImageCropper : IAsyncDisposable
+public partial class ImageCropper
{
- [NotNull]
- private IJSObjectReference? Module { get; set; }
-
- [Inject, NotNull]
- protected IJSRuntime? JSRuntime { get; set; }
-
- private DotNetObjectReference
? Instance { get; set; }
-
- ///
- /// UI界面元素的引用对象
- ///
- private ElementReference Element { get; set; }
-
- ///
- /// 获得/设置 用于渲染的文件流,为空则用 FileName 参数读取文件
- ///
- [Parameter]
- public Stream? Stream { get; set; }
-
- private byte[]? streamCache { get; set; }
-
///
- /// 获得/设置 图片URL/Base64 dataurl
+ /// 获得/设置 图片地址 URL
///
[Parameter]
public string? Url { get; set; }
///
- /// 确认按钮文本/Confirm button title
- ///
- [Parameter]
- public string ConfirmBtnTitle { get; set; } = "OK";
-
- ///
- /// 复位按钮文本/Reset button title
+ /// 获取/设置 是否被禁用 默认 false
///
[Parameter]
- public string ResetBtnTitle { get; set; } = "复位";
+ public bool IsDisabled { get; set; }
///
- /// 预览文本/Preview title
+ /// 获得/设置 剪裁结果回调方法
///
[Parameter]
- public string PreviewTitle { get; set; } = "预览";
+ public Func? OnCropAsync { get; set; }
///
- /// 显示默认按钮/Show default button
+ /// 获取/设置 裁剪选项
///
[Parameter]
- public bool DefaultButton { get; set; } = true;
+ public ImageCropperOption? Options { get; set; }
///
- /// 显示剪裁后预览/Preview image afrer cropper
+ /// 获取/设置 裁剪形状（矩形/圆形）默认
///
[Parameter]
- public bool Preview { get; set; } = true;
+ public ImageCropperShape CropperShape { get; set; }
- ///
- /// 获得/设置 读取本地文件路径
- ///
- [Parameter]
- public string? LocalFileName { get; set; }
+ private string? ClassString => CssBuilder.Default("bb-cropper")
+ .AddClass("is-round", CropperShape == ImageCropperShape.Round)
+ .AddClassFromAttributes(AdditionalAttributes)
+ .Build();
- ///
- /// 自定义图片 CSS
- ///
- [Parameter]
- public string? CssClass { get; set; }
-
- ///
- /// 自定义CSS,,默认为内置 cropper.css
- ///
- [Parameter]
- public string? CssPath { get; set; } = "./_content/BootstrapBlazor.ImageCropper/cropper.css" + "?v=" + Ver;
-
- ///
- /// 自定义cropper.js路径,默认为null,使用内置 cropper.js
- ///
- [Parameter]
- public string? ModulePath { get; set; }
-
- ///
- /// 获得/设置 剪裁结果回调方法/Cropper result callback method
- ///
- [Parameter]
- public Func? OnResult { get; set; }
-
- ///
- /// 获得/设置 剪裁结果base64回调方法
- ///
- [Parameter]
- public Func? OnBase64Result { get; set; }
-
- ///
- /// 获得/设置 错误回调方法
- ///
- [Parameter]
- public Func? OnError { get; set; }
-
- private static string? Ver { get; set; } = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version?.ToString();
-
- [NotNull]
- private string? Id { get; set; }
- private string? ErrorMessage { get; set; }
-
- [Parameter]
- public CropperOption Options { get; set; } = new();
-
- ///
- ///
- ///
- protected override void OnInitialized()
- {
- base.OnInitialized();
-
- Id = $"vp_{GetHashCode()}";
- }
+ private bool _isDisabled;
///
///
@@ -141,249 +55,101 @@ protected override void OnInitialized()
///
protected override async Task OnAfterRenderAsync(bool firstRender)
{
- try
- {
- if (firstRender)
- {
- ModulePath = ModulePath ?? $"./_content/BootstrapBlazor.ImageCropper/cropper.js" + "?v=" + Ver;
-
- await JSRuntime.InvokeAsync("import", ModulePath);
+ await base.OnAfterRenderAsync(firstRender);
- Module = await JSRuntime.InvokeAsync("import", "./_content/BootstrapBlazor.ImageCropper/ImageCropper.razor.js" + "?v=" + Ver);
- Instance = DotNetObjectReference.Create(this);
- await Module!.InvokeVoidAsync("init", Instance, Element, Options);
- //await Module!.InvokeVoidAsync("changeAvatar", Instance, Element);
-
- }
+ if (firstRender)
+ {
+ _isDisabled = IsDisabled;
}
- catch (Exception e)
+
+ if (_isDisabled != IsDisabled)
{
- OnError?.Invoke(e.Message);
+ _isDisabled = IsDisabled;
+ if (IsDisabled)
+ {
+ await Disable();
+ }
+ else
+ {
+ await Enable();
+ }
}
}
///
- /// 剪裁,返回 base64, 并执行 OnResult/OnBase64Result 回调
+ ///
///
- /// base64
- public async Task Crop()
- {
- var base64encodedstring = await Module!.InvokeAsync("crop");
- await GetResult(base64encodedstring);
- return base64encodedstring;
- }
+ ///
+ protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Options ?? new());
///
- /// 剪裁,返回 Stream
+ /// 剪裁方法 自动触发 回调方法
///
- /// Stream
- public async Task CropToStream() => DataUrl2Stream(await Module!.InvokeAsync("crop"));
+ public async Task Crop()
+ {
+ var result = await InvokeAsync("crop", Id);
+ if (!string.IsNullOrEmpty(result))
+ {
+ if (OnCropAsync != null)
+ {
+ await OnCropAsync(new ImageCropperResult(result));
+ }
+ }
+ return result;
+ }
///
- /// 替换图片
+ /// 替换图片方法
///
///
///
- public async Task Replace(string url) => await Module!.InvokeVoidAsync("replace", url);
+ public Task Replace(string url) => InvokeVoidAsync("replace", Id, url);
///
- /// 使用新数据更改裁剪区域的位置和大小（基于原始图像）,注意：此方法仅在选项值viewMode大于或等于时可用1
+ /// 重置图片方法
///
- ///
///
- public async Task SetData(object data) => await Module!.InvokeVoidAsync("setData", data);
+ public Task Reset() => InvokeVoidAsync("reset", Id);
///
- /// 更改拖动模式,可以通过双击裁剪器来切换“裁剪”和“移动”模式, 参数为可选 : 'none'，'crop'，'move'
+ /// 更改拖动模式 可以通过双击裁剪器来切换“裁剪”和“移动”模式, 参数为可选 : 'none'，'crop'，'move'
///
- ///
+ ///
///
- public async Task SetDragMode(string? mode) => await Module!.InvokeVoidAsync("setDragMode", mode);
+ public Task SetDragMode(string? mode) => InvokeVoidAsync("setDragMode", Id, mode);
///
/// 组件可用
///
///
- public async Task Enable() => await Module!.InvokeVoidAsync("enable");
-
- ///
- /// 禁用组件
- ///
- ///
- public async Task Disable() => await Module!.InvokeVoidAsync("disable");
-
- ///
- /// 复位图像
- ///
- ///
- public async Task Reset() => await Module!.InvokeVoidAsync("reset");
-
- ///
- /// 清空图像
- ///
- ///
- public async Task Clear() => await Module!.InvokeVoidAsync("clear");
-
- ///
- /// 销毁
- ///
- ///
- public async Task Destroy() => await Module!.InvokeVoidAsync("destroy");
-
- ///
- /// 旋转, 90, 180, 270, -90 ...
- ///
- ///
- ///
- public async Task Rotate(int degree) => await Module!.InvokeVoidAsync("rotate", degree);
-
- //[JSInvokable]
- public async Task GetResult(string base64encodedstring)
+ public Task Enable()
{
- try
- {
- if (OnResult != null)
- {
- await OnResult.Invoke(DataUrl2Stream(base64encodedstring));
- }
- if (OnBase64Result != null)
- {
- await OnBase64Result.Invoke(base64encodedstring);
- }
- }
- catch (Exception e)
- {
- if (OnError != null)
- {
- await OnError.Invoke(e.Message);
- }
- }
+ IsDisabled = false;
+ _isDisabled = false;
+ return InvokeVoidAsync("enable", Id);
}
///
- /// 选择图片解码 / Select picture decoding
+ /// 禁用组件
///
- /// 可选直接解码 Base64, DataUrl 格式
///
- public async Task DecodeFromImage(string? dataUrl = null)
+ public Task Disable()
{
- if (dataUrl != null && !dataUrl.StartsWith("data:image"))
- {
- dataUrl = "data:image/jpeg;base64," + dataUrl;
- }
- await Module!.InvokeVoidAsync("DecodeFormImage", dataUrl);
+ IsDisabled = true;
+ _isDisabled = true;
+ return InvokeVoidAsync("disable", Id);
}
///
- /// 从 DataUrl 转换为 Stream
- /// Convert from a DataUrl to an Stream
- ///
- ///
- ///
- public static Stream DataUrl2Stream(string base64encodedstring)
- {
- var base64Data = Regex.Match(base64encodedstring, @"data:image/(?.+?),(?.+)").Groups["data"].Value;
- var bytes = Convert.FromBase64String(base64Data);
- var stream = new MemoryStream(bytes);
- return stream;
- }
-
- public virtual async Task Refresh()
- {
- ErrorMessage = null;
- try
- {
- if (Stream != null)
- {
- await ShowPdf(Stream);
- }
- else if (!string.IsNullOrEmpty(LocalFileName) && File.Exists(LocalFileName))
- {
- var streamLocal = new FileStream(LocalFileName, FileMode.Open, FileAccess.Read);
- if (streamLocal != null)
- {
- await ShowPdf(streamLocal);
- }
- else
- {
- ErrorMessage = "No data";
- }
- }
- else if (!string.IsNullOrEmpty(Url) && Url.StartsWith("http"))
- {
- var client = new HttpClient();
- var stream = await client.GetStreamAsync(Url);
- if (stream != null)
- {
- await ShowPdf(stream);
- }
- else
- {
- ErrorMessage = "No data";
- }
- }
-
- }
- catch (Exception e)
- {
- ErrorMessage = e.Message;
- }
- StateHasChanged();
-
- }
-
-
- ///
- /// 打开 stream
- ///
- public virtual async Task ShowPdf(Stream stream)
- {
- if (Module == null)
- {
- Stream = stream;
- }
- else
- {
- if (streamCache == null)
- {
- streamCache = new byte[stream.Length];
- stream.Read(streamCache, 0, (int)stream.Length);
- }
- if (streamCache != null)
- {
- Url = null;
- using var streamRef = new DotNetStreamReference(new MemoryStream(streamCache));
- await Module!.InvokeVoidAsync("showPdf", Url, Element, streamRef);
- }
- }
- }
-
- ///
- /// 错误回调方法
+ /// 清空图像
///
- ///
///
- [JSInvokable]
- public async Task GetError(string error)
- {
- if (OnError != null)
- {
- await OnError.Invoke(error);
- }
- }
+ public Task Clear() => InvokeVoidAsync("clear", Id);
///
- ///
+ /// 旋转图片方法
///
+ /// 旋转角度
///
- public async ValueTask DisposeAsync()
- {
- if (Module is not null)
- {
- await Module.InvokeVoidAsync("destroyMod");
- await Module.DisposeAsync();
- }
- GC.SuppressFinalize(this);
- }
-
+ public async Task Rotate(int angle) => await InvokeVoidAsync("rotate", Id, angle);
}
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.css b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.css
deleted file mode 100644
index f54e6cc..0000000
--- a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-.containerTop {
- max-width: 640px;
-}
-
-img {
- max-width: 100%;
-}
-
-.cropper-view-box,
-.cropper-face {
- background-color: black;
- opacity: 1;
-}
-
-.label {
- cursor: pointer;
-}
-
\ No newline at end of file
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js
index f1209cb..204a941 100644
--- a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js
@@ -1,69 +1,130 @@
-let cropper = null;
-let opt = null;
-let inst = null;
-let result = null;
+import Cropper from './cropper.esm.js'
+import Data from '../BootstrapBlazor/modules/data.js'
+import { addLink } from '../BootstrapBlazor/modules/utility.js'
-export async function init(instance, element, options) {
- inst = instance;
- opt = options;
+export async function init(id, options) {
+ await addLink("./_content/BootstrapBlazor.ImageCropper/cropper.bundle.css");
- var image = element.querySelector("[data-action=image]");
- result = element.querySelector("[data-action=result]");
- cropper = new Cropper(image, options);
+ const el = document.getElementById(id);
+ if (el === null) {
+ return;
+ }
+
+ const image = el.querySelector(".bb-cropper-image");
+ const cropper = new Cropper(image, getOptions(options));
+ Data.set(id, cropper);
}
-export async function crop() {
- cropper.crop();
- let resultData = cropper.getCroppedCanvas();
- if (result) {
- result.innerHTML = '';
- result.appendChild(resultData);
+const getOptions = op => {
+ const options = {
+ ...(op || {})
+ }
+ if (options.isRound === true) {
+ options.aspectRatio = 1;
}
- //inst.invokeMethodAsync("GetResult", resultDataUrl);
- return resultData.toDataURL("image/jpeg", 0.8);
+ return options;
}
-export async function replace(url) {
- cropper.replace(url);
-}
+export function dispose(id) {
+ const cropper = Data.get(id);
+ Data.remove(id);
-export async function setData(data) {
- cropper.setData(data);
+ if (cropper != null) {
+ cropper.destroy();
+ }
}
-export async function setDragMode(mode) {
- cropper.setDragMode(mode);
+export function crop(id) {
+ let ret = null;
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ const { isRound } = cropper.options;
+ cropper.crop();
+ let resultData = cropper.getCroppedCanvas();
+ if (isRound) {
+ resultData = getRoundCanvas(resultData);
+ }
+ ret = resultData.toDataURL();
+ resultData = null;
+ }
+ return ret;
}
-export async function rotate() {
- cropper.rotate(90);
+export function replace(id, url) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.replace(url);
+ }
}
-export async function reset() {
- cropper.reset();
+export function reset(id) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.reset();
+ }
}
-export async function clear() {
- cropper.clear();
+export function setDragMode(id, mode) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.setDragMode(mode);
+ }
}
-export async function destroy() {
- cropper.destroy();
+export function rotate(id, angle) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.rotate(angle);
+ }
}
-export async function enable() {
- cropper.enable();
+export function clear(id) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.clear();
+ }
}
-export async function disable() {
- cropper.disable();
+export async function enable(id) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.enable();
+ }
+
+ const el = document.getElementById(id);
+ if (el) {
+ el.classList.remove("disabled");
+ }
}
-export function destroyMod() {
- if (undefined !== cropper && null !== cropper) {
- cropper.destroy();
- cropper = null;
- console.log('destroy');
+export async function disable(id) {
+ const cropper = Data.get(id);
+ if (cropper != null) {
+ cropper.disable();
+ }
+
+ const el = document.getElementById(id);
+ if (el) {
+ el.classList.add("disabled");
}
-}
\ No newline at end of file
+}
+
+const getRoundCanvas = sourceCanvas => {
+ var canvas = document.createElement('canvas');
+ var context = canvas.getContext('2d');
+ var width = sourceCanvas.width;
+ var height = sourceCanvas.height;
+
+ canvas.width = width;
+ canvas.height = height;
+ context.imageSmoothingEnabled = true;
+ context.drawImage(sourceCanvas, 0, 0, width, height);
+ context.globalCompositeOperation = 'destination-in';
+ context.beginPath();
+ context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
+ context.fill();
+
+ sourceCanvas = null;
+ return canvas;
+}
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropperDragMode.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropperDragMode.cs
new file mode 100644
index 0000000..f6bd930
--- /dev/null
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropperDragMode.cs
@@ -0,0 +1,26 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+///
+/// 拖动模式
+///
+public enum ImageCropperDragMode
+{
+ ///
+ /// 创建一个新的裁剪框
+ ///
+ Crop,
+
+ ///
+ /// 画布和图片都可以移动
+ ///
+ Move,
+
+ ///
+ /// 未设置
+ ///
+ None
+}
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropperOption.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropperOption.cs
index dc7aaa8..6810f4a 100644
--- a/src/components/BootstrapBlazor.ImageCropper/ImageCropperOption.cs
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropperOption.cs
@@ -1,236 +1,214 @@
-// **********************************
-// Densen Informatica 中讯科技
-// 作者：Alex Chow
-// e-mail:zhouchuanglin@gmail.com
-// **********************************
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+using BootstrapBlazor.Core.Converter;
using System.Text.Json.Serialization;
namespace BootstrapBlazor.Components;
///
-/// 播放器选项
+/// 裁剪选项
///
-public class CropperOption
+public class ImageCropperOption
{
-
- ///
- /// 定义自动裁剪区域大小（百分比）,默认值：（0.8图像的 80%）
- ///
- public float AutoCropArea { get; set; } = 0.8f;
-
- ///
- /// 启用初始化时自动裁剪图像
- ///
- public bool AutoCrop { get; set; } = true;
-
- ///
- /// 定义裁剪框的固定纵横比。默认情况下，裁剪框具有自由比例。 设置为1, 裁剪区默认正方形
- ///
- public int? AspectRatio { get; set; }
-
- ///
- /// 显示容器的网格背景, 默认 false 关闭
- ///
- public bool Background { get; set; }
-
- ///
- /// 在裁剪框上方显示中心指示器
- ///
- public bool Center { get; set; } = true;
-
///
- /// 检查当前图片是否为跨域图片, 默认 true 。crossOrigin则会在克隆的图像元素中添加一个属性，并在该属性中添加一个时间戳参数，src以重新加载源图像，以避免浏览器缓存错误。向图像元素添加crossOrigin属性将停止向图像 URL 添加时间戳并停止重新加载图像。但是读取图像数据以进行方向检查的请求（XMLHttpRequest）将需要时间戳来破坏缓存以避免浏览器缓存错误。您可以将checkOrientation选项设置false为取消此请求。如果图像crossOrigin属性的值为"use-credentials"，则当通过 XMLHttpRequest 读取图像数据时，该withCredentials属性将设置为。true
+ /// Define the view mode of the cropper
///
- public bool CheckCrossOrigin { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public ImageCropperViewMode? ViewMode { get; set; }
///
- /// 检查当前图像的 Exif 方向信息, 默认 true 。请注意，只有 JPEG 图像可能包含 Exif 方向信息。
+ /// Define the dragging mode of the cropper
///
- public bool CheckOrientation { get; set; } = true;
-
- public string? Crop { get; set; }
+ [JsonEnumConverter(true)]
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public ImageCropperDragMode? DragMode { get; set; }
///
- /// 启用/禁止裁剪区移动, 默认 true, 可移动
+ /// Define the initial aspect ratio of the crop box
///
- public bool CropBoxMovable { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public string? InitialAspectRatio { get; set; }
///
- /// 启用/禁止裁剪区缩放, 默认 true, 可缩放
+ /// Define the fixed aspect ratio of the crop box 定义裁剪框的固定纵横比
///
- public bool CropBoxResizable { get; set; } = true;
-
- public object? Cropend { get; set; }
- public object? Cropmove { get; set; }
- public object? Cropstart { get; set; }
+ /// 默认情况下，裁剪框具有自由比例。 设置为1, 裁剪区默认正方形
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? AspectRatio { get; set; }
///
- /// 数据, 您存储的先前裁剪的数据将setData在初始化时自动传递给该方法, 仅当该autoCrop选项设置为 时才可用true
+ /// Re-render the cropper when resizing the window. default tue
///
- public object? Data { get; set; }
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Responsive { get; set; }
///
- /// 拖动模式, 默认 move 画布和图片都可以移动, 'none'，'crop'，'move'
+ /// Restore the cropped area after resizing the window. default tue
///
- public string DragMode => cropperDragMode.ToString();
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Restore { get; set; }
///
- /// 拖动模式, 默认 move 画布和图片都可以移动, 'none'，'crop'，'move'
+ /// Check if the current image is a cross-origin image. default tue
///
- [JsonIgnore]
- public CropperDragMode cropperDragMode { get; set; } = CropperDragMode.move;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? CheckCrossOrigin { get; set; }
///
- /// 显示裁剪框上方的虚线
+ /// Check the current image's Exif Orientation information. Note that only a JPEG image may contain Exif Orientation information. default tue
///
- public bool Guides { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? CheckOrientation { get; set; }
///
- /// 在裁剪框上方显示白色模态（突出显示裁剪框）
+ /// 在图像上方和裁剪框下方显示黑色模态框. default tue
///
- public bool Highlight { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Modal { get; set; }
///
- /// 裁剪框的最小高度
+ /// 显示裁剪框上方的虚线. default tue
///
- public int MinCanvasHeight { get; set; } = 0;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Guides { get; set; }
///
- /// 裁剪框的最小宽度
+ /// 在裁剪框上方显示中心指示器. default tue
///
- public int MinCanvasWidth { get; set; } = 0;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Center { get; set; }
///
- /// 容器的最小宽度
+ /// 在裁剪框上方显示白色模态（突出显示裁剪框）. default tue
///
- public int MinContainerHeight { get; set; } = 100;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Highlight { get; set; }
///
- /// 容器的最小宽度
+ /// 显示容器的网格背景, 默认 true 关闭
///
- public int MinContainerWidth { get; set; } = 200;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Background { get; set; }
///
- /// 画布的最小高度
+ /// Enable to crop the image automatically when initialized. default tue
///
- public int MinCropBoxHeight { get; set; } = 0;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? AutoCrop { get; set; }
///
- /// 画布的最小宽度
+ /// It should be a number between 0 and 1. Define the automatic cropping area size (percentage) default is 0.8f
///
- public int MinCropBoxWidth { get; set; } = 0;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public float? AutoCropArea { get; set; }
///
- /// 在图像上方和裁剪框下方显示黑色模态框
+ /// Enable to move the image. default tue
///
- public bool Modal { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Movable { get; set; }
///
- /// 可移动图像
+ /// Enable to rotate the image. default tue
///
- public bool Movable { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Rotatable { get; set; }
///
- /// 预览 , 默认：'' , 类型：Element、Array（元素）NodeList或String（选择器）
+ /// Enable to scale the image. default tue
///
- public string Preview { get; set; } = "";
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Scalable { get; set; }
///
- /// 调整窗口大小时重新渲染裁剪器
+ /// Enable to zoom the image. default tue
///
- public bool Responsive { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? Zoomable { get; set; }
///
- /// 调整窗口大小后恢复裁剪区域
+ /// Enable to zoom the image by dragging touch. default tue
///
-
- public bool Restore { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? ZoomOnTouch { get; set; }
///
- /// 可旋转
+ /// Enable to zoom the image by mouse wheeling. default tue
///
- public bool Rotatable { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? ZoomOnWheel { get; set; }
///
- /// 可旋转
+ /// Define zoom ratio when zooming the image by mouse wheeling
///
- public bool Scalable { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public float? WheelZoomRatio { get; set; }
///
- /// 启用在裁剪器上单击两次时在"crop"和之间切换拖动模式。"move"
+ /// Enable to move the crop box by dragging. default tue
///
- public bool ToggleDragModeOnDblclick { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? CropBoxMovable { get; set; }
///
- /// 1.只能在裁剪的图片范围内移动
+ /// Enable to resize the crop box by dragging. default tue
///
- public int ViewMode => (int)ViewModes;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? CropBoxResizable { get; set; }
///
- /// 1.只能在裁剪的图片范围内移动
+ /// Enable to toggle drag mode between "crop" and "move" when clicking twice on the cropper. default tue
///
- [JsonIgnore]
- public CropperViewMode ViewModes { get; set; } = CropperViewMode.crop_box_not_to_exceed_the_size_canvas;
-
- public float WheelZoomRatio { get; set; } = 0.1f;
- public int? Zoom { get; set; }
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? ToggleDragModeOnDblclick { get; set; }
///
- /// 通过拖动触摸来缩放图像
+ /// 裁剪框的最小高度 默认值 0
///
- public bool ZoomOnTouch { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? MinCanvasHeight { get; set; }
///
- /// 鼠标滚轮缩放
+ /// 裁剪框的最小宽度 默认值 0
///
- public bool ZoomOnWheel { get; set; } = true;
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? MinCanvasWidth { get; set; }
///
- /// 可缩放
+ /// 容器的最小宽度 默认值 100
///
- public bool Zoomable { get; set; } = true;
-
-}
-
-///
-/// 拖动模式
-///
-public enum CropperDragMode
-{
- ///
- /// 创建一个新的裁剪框/create a new crop box
- ///
- crop,
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? MinContainerHeight { get; set; }
///
- /// 画布和图片都可以移动/move the canvas
+ /// 容器的最小宽度 默认值 200
///
- move,
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? MinContainerWidth { get; set; }
- none
-}
-
-public enum CropperViewMode
-{
///
- /// 无限制,裁剪框可以延伸到画布之外
+ /// 画布的最小高度 默认值 0
///
- no_restrictions,
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? MinCropBoxHeight { get; set; }
///
- /// 限制裁剪框不超过画布的大小
+ /// 画布的最小宽度 默认值 0
///
- crop_box_not_to_exceed_the_size_canvas,
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public int? MinCropBoxWidth { get; set; }
///
- /// 限制最小画布尺寸以适合容器。如果画布和容器的比例不同，则最小画布将被其中一个维度的额外空间包围,裁剪框限制为画布的大小
+ /// 是否圆角处理 默认 false
///
- fit_container,
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public bool? IsRound { get; set; }
///
- /// 限制最小画布尺寸以填充容器。如果画布和容器的比例不同，则容器将无法以某一维度容纳整个画布
+ /// 获得/设置 圆角 radius 值
///
- fit_container_width,
-
+ [JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
+ public string? Radius { get; set; }
}
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropperResult.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropperResult.cs
new file mode 100644
index 0000000..a1000a5
--- /dev/null
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropperResult.cs
@@ -0,0 +1,50 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using System.Text.RegularExpressions;
+
+namespace BootstrapBlazor.Components;
+
+///
+/// 裁切结果实体类
+///
+///
+/// 构造函数
+///
+///
+public class ImageCropperResult(string data)
+{
+ ///
+ /// 获得/设置 裁剪后数据 base64 格式字符串
+ ///
+ public string Data { get; } = data;
+
+ ///
+ /// 获得/设置 裁剪后数据流 由 base64 格式字符串转换
+ ///
+ [NotNull]
+ public Stream? Stream
+ {
+ get
+ {
+ _stream ??= ConvertToStream();
+ return _stream;
+ }
+ }
+
+ private Stream? _stream;
+
+ private MemoryStream ConvertToStream()
+ {
+ MemoryStream? stream = null;
+ var match = Regex.Match(Data, @"data:image/(?.+?),(?.+)");
+ if (match.Success)
+ {
+ var data = match.Groups["data"].Value;
+ var bytes = Convert.FromBase64String(data);
+ stream = new MemoryStream(bytes);
+ }
+ return stream ?? new MemoryStream();
+ }
+}
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropperShape.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropperShape.cs
new file mode 100644
index 0000000..dd6f449
--- /dev/null
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropperShape.cs
@@ -0,0 +1,21 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+///
+/// 裁切形状
+///
+public enum ImageCropperShape
+{
+ ///
+ /// 矩形
+ ///
+ Rectangle,
+
+ ///
+ /// 圆形
+ ///
+ Round
+}
diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropperViewMode.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropperViewMode.cs
new file mode 100644
index 0000000..9107a9b
--- /dev/null
+++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropperViewMode.cs
@@ -0,0 +1,31 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+///
+/// ImageCropperViewMode 枚举值
+///
+public enum ImageCropperViewMode
+{
+ ///
+ /// 无限制,裁剪框可以延伸到画布之外
+ ///
+ NoRestrictions,
+
+ ///
+ /// 限制裁剪框不超过画布的大小
+ ///
+ CropBoxNotToExceedTheSizeCanvas,
+
+ ///
+ /// 限制最小画布尺寸以适合容器。如果画布和容器的比例不同，则最小画布将被其中一个维度的额外空间包围,裁剪框限制为画布的大小
+ ///
+ FitContainer,
+
+ ///
+ /// 限制最小画布尺寸以填充容器。如果画布和容器的比例不同，则容器将无法以某一维度容纳整个画布
+ ///
+ FitContainerWidth,
+}
diff --git a/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css
new file mode 100644
index 0000000..afd3a49
--- /dev/null
+++ b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css
@@ -0,0 +1,21 @@
+@import url('./cropper.min.css');
+
+.bb-cropper {
+ --bb-crop-disabled-opacity: 0.65;
+ max-width: 640px;
+ width: 100%;
+ height: 100%;
+}
+
+ .bb-cropper .bb-cropper-image {
+ width: 100%;
+ }
+
+ .bb-cropper.is-round .cropper-view-box,
+ .bb-cropper.is-round .cropper-face {
+ border-radius: 50%;
+ }
+
+ .bb-cropper.disabled {
+ opacity: var(--bb-crop-disabled-opacity);
+ }
diff --git a/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.css b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.css
deleted file mode 100644
index 506909e..0000000
--- a/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.css
+++ /dev/null
@@ -1,304 +0,0 @@
-/*!
- * Cropper.js v1.5.12
- * https://fengyuanchen.github.io/cropperjs
- *
- * Copyright 2015-present Chen Fengyuan
- * Released under the MIT license
- *
- * Date: 2021-06-12T08:00:11.623Z
- */
-
-.cropper-container {
- direction: ltr;
- font-size: 0;
- line-height: 0;
- position: relative;
- -ms-touch-action: none;
- touch-action: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.cropper-container img {
- display: block;
- height: 100%;
- image-orientation: 0deg;
- max-height: none !important;
- max-width: none !important;
- min-height: 0 !important;
- min-width: 0 !important;
- width: 100%;
-}
-
-.cropper-wrap-box,
-.cropper-canvas,
-.cropper-drag-box,
-.cropper-crop-box,
-.cropper-modal {
- bottom: 0;
- left: 0;
- position: absolute;
- right: 0;
- top: 0;
-}
-
-.cropper-wrap-box,
-.cropper-canvas {
- overflow: hidden;
-}
-
-.cropper-drag-box {
- background-color: #fff;
- opacity: 0;
-}
-
-.cropper-modal {
- background-color: #000;
- opacity: 0.5;
-}
-
-.cropper-view-box {
- display: block;
- height: 100%;
- outline: 1px solid #39f;
- outline-color: rgba(51, 153, 255, 0.75);
- overflow: hidden;
- width: 100%;
-}
-
-.cropper-dashed {
- border: 0 dashed #eee;
- display: block;
- opacity: 0.5;
- position: absolute;
-}
-
-.cropper-dashed.dashed-h {
- border-bottom-width: 1px;
- border-top-width: 1px;
- height: calc(100% / 3);
- left: 0;
- top: calc(100% / 3);
- width: 100%;
-}
-
-.cropper-dashed.dashed-v {
- border-left-width: 1px;
- border-right-width: 1px;
- height: 100%;
- left: calc(100% / 3);
- top: 0;
- width: calc(100% / 3);
-}
-
-.cropper-center {
- display: block;
- height: 0;
- left: 50%;
- opacity: 0.75;
- position: absolute;
- top: 50%;
- width: 0;
-}
-
-.cropper-center::before,
-.cropper-center::after {
- background-color: #eee;
- content: ' ';
- display: block;
- position: absolute;
-}
-
-.cropper-center::before {
- height: 1px;
- left: -3px;
- top: 0;
- width: 7px;
-}
-
-.cropper-center::after {
- height: 7px;
- left: 0;
- top: -3px;
- width: 1px;
-}
-
-.cropper-face,
-.cropper-line,
-.cropper-point {
- display: block;
- height: 100%;
- opacity: 0.1;
- position: absolute;
- width: 100%;
-}
-
-.cropper-face {
- background-color: #fff;
- left: 0;
- top: 0;
-}
-
-.cropper-line {
- background-color: #39f;
-}
-
-.cropper-line.line-e {
- cursor: ew-resize;
- right: -3px;
- top: 0;
- width: 5px;
-}
-
-.cropper-line.line-n {
- cursor: ns-resize;
- height: 5px;
- left: 0;
- top: -3px;
-}
-
-.cropper-line.line-w {
- cursor: ew-resize;
- left: -3px;
- top: 0;
- width: 5px;
-}
-
-.cropper-line.line-s {
- bottom: -3px;
- cursor: ns-resize;
- height: 5px;
- left: 0;
-}
-
-.cropper-point {
- background-color: #39f;
- height: 5px;
- opacity: 0.75;
- width: 5px;
-}
-
-.cropper-point.point-e {
- cursor: ew-resize;
- margin-top: -3px;
- right: -3px;
- top: 50%;
-}
-
-.cropper-point.point-n {
- cursor: ns-resize;
- left: 50%;
- margin-left: -3px;
- top: -3px;
-}
-
-.cropper-point.point-w {
- cursor: ew-resize;
- left: -3px;
- margin-top: -3px;
- top: 50%;
-}
-
-.cropper-point.point-s {
- bottom: -3px;
- cursor: s-resize;
- left: 50%;
- margin-left: -3px;
-}
-
-.cropper-point.point-ne {
- cursor: nesw-resize;
- right: -3px;
- top: -3px;
-}
-
-.cropper-point.point-nw {
- cursor: nwse-resize;
- left: -3px;
- top: -3px;
-}
-
-.cropper-point.point-sw {
- bottom: -3px;
- cursor: nesw-resize;
- left: -3px;
-}
-
-.cropper-point.point-se {
- bottom: -3px;
- cursor: nwse-resize;
- height: 20px;
- opacity: 1;
- right: -3px;
- width: 20px;
-}
-
-@media (min-width: 768px) {
- .cropper-point.point-se {
- height: 15px;
- width: 15px;
- }
-}
-
-@media (min-width: 992px) {
- .cropper-point.point-se {
- height: 10px;
- width: 10px;
- }
-}
-
-@media (min-width: 1200px) {
- .cropper-point.point-se {
- height: 5px;
- opacity: 0.75;
- width: 5px;
- }
-}
-
-.cropper-point.point-se::before {
- background-color: #39f;
- bottom: -50%;
- content: ' ';
- display: block;
- height: 200%;
- opacity: 0;
- position: absolute;
- right: -50%;
- width: 200%;
-}
-
-.cropper-invisible {
- opacity: 0;
-}
-
-.cropper-bg {
- background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
-}
-
-.cropper-hide {
- display: block;
- height: 0;
- position: absolute;
- width: 0;
-}
-
-.cropper-hidden {
- display: none !important;
-}
-
-.cropper-move {
- cursor: move;
-}
-
-.cropper-crop {
- cursor: crosshair;
-}
-
-.cropper-disabled .cropper-drag-box,
-.cropper-disabled .cropper-face,
-.cropper-disabled .cropper-line,
-.cropper-disabled .cropper-point {
- cursor: not-allowed;
-}
diff --git a/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.esm.js b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.esm.js
new file mode 100644
index 0000000..69c0fb7
--- /dev/null
+++ b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.esm.js
@@ -0,0 +1,3265 @@
+/*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:05.335Z
+ */
+
+function ownKeys(e, r) {
+ var t = Object.keys(e);
+ if (Object.getOwnPropertySymbols) {
+ var o = Object.getOwnPropertySymbols(e);
+ r && (o = o.filter(function (r) {
+ return Object.getOwnPropertyDescriptor(e, r).enumerable;
+ })), t.push.apply(t, o);
+ }
+ return t;
+}
+function _objectSpread2(e) {
+ for (var r = 1; r < arguments.length; r++) {
+ var t = null != arguments[r] ? arguments[r] : {};
+ r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+ _defineProperty(e, r, t[r]);
+ }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+ Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+ });
+ }
+ return e;
+}
+function _toPrimitive(t, r) {
+ if ("object" != typeof t || !t) return t;
+ var e = t[Symbol.toPrimitive];
+ if (void 0 !== e) {
+ var i = e.call(t, r || "default");
+ if ("object" != typeof i) return i;
+ throw new TypeError("@@toPrimitive must return a primitive value.");
+ }
+ return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+ var i = _toPrimitive(t, "string");
+ return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+ "@babel/helpers - typeof";
+
+ return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+ return typeof o;
+ } : function (o) {
+ return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+ }, _typeof(o);
+}
+function _classCallCheck(instance, Constructor) {
+ if (!(instance instanceof Constructor)) {
+ throw new TypeError("Cannot call a class as a function");
+ }
+}
+function _defineProperties(target, props) {
+ for (var i = 0; i < props.length; i++) {
+ var descriptor = props[i];
+ descriptor.enumerable = descriptor.enumerable || false;
+ descriptor.configurable = true;
+ if ("value" in descriptor) descriptor.writable = true;
+ Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+ }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+ if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+ if (staticProps) _defineProperties(Constructor, staticProps);
+ Object.defineProperty(Constructor, "prototype", {
+ writable: false
+ });
+ return Constructor;
+}
+function _defineProperty(obj, key, value) {
+ key = _toPropertyKey(key);
+ if (key in obj) {
+ Object.defineProperty(obj, key, {
+ value: value,
+ enumerable: true,
+ configurable: true,
+ writable: true
+ });
+ } else {
+ obj[key] = value;
+ }
+ return obj;
+}
+function _toConsumableArray(arr) {
+ return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
+function _arrayWithoutHoles(arr) {
+ if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
+function _iterableToArray(iter) {
+ if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _unsupportedIterableToArray(o, minLen) {
+ if (!o) return;
+ if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+ var n = Object.prototype.toString.call(o).slice(8, -1);
+ if (n === "Object" && o.constructor) n = o.constructor.name;
+ if (n === "Map" || n === "Set") return Array.from(o);
+ if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+ if (len == null || len > arr.length) len = arr.length;
+ for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+ return arr2;
+}
+function _nonIterableSpread() {
+ throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var IS_BROWSER = typeof window !== 'undefined' && typeof window.document !== 'undefined';
+var WINDOW = IS_BROWSER ? window : {};
+var IS_TOUCH_DEVICE = IS_BROWSER && WINDOW.document.documentElement ? 'ontouchstart' in WINDOW.document.documentElement : false;
+var HAS_POINTER_EVENT = IS_BROWSER ? 'PointerEvent' in WINDOW : false;
+var NAMESPACE = 'cropper';
+
+// Actions
+var ACTION_ALL = 'all';
+var ACTION_CROP = 'crop';
+var ACTION_MOVE = 'move';
+var ACTION_ZOOM = 'zoom';
+var ACTION_EAST = 'e';
+var ACTION_WEST = 'w';
+var ACTION_SOUTH = 's';
+var ACTION_NORTH = 'n';
+var ACTION_NORTH_EAST = 'ne';
+var ACTION_NORTH_WEST = 'nw';
+var ACTION_SOUTH_EAST = 'se';
+var ACTION_SOUTH_WEST = 'sw';
+
+// Classes
+var CLASS_CROP = "".concat(NAMESPACE, "-crop");
+var CLASS_DISABLED = "".concat(NAMESPACE, "-disabled");
+var CLASS_HIDDEN = "".concat(NAMESPACE, "-hidden");
+var CLASS_HIDE = "".concat(NAMESPACE, "-hide");
+var CLASS_INVISIBLE = "".concat(NAMESPACE, "-invisible");
+var CLASS_MODAL = "".concat(NAMESPACE, "-modal");
+var CLASS_MOVE = "".concat(NAMESPACE, "-move");
+
+// Data keys
+var DATA_ACTION = "".concat(NAMESPACE, "Action");
+var DATA_PREVIEW = "".concat(NAMESPACE, "Preview");
+
+// Drag modes
+var DRAG_MODE_CROP = 'crop';
+var DRAG_MODE_MOVE = 'move';
+var DRAG_MODE_NONE = 'none';
+
+// Events
+var EVENT_CROP = 'crop';
+var EVENT_CROP_END = 'cropend';
+var EVENT_CROP_MOVE = 'cropmove';
+var EVENT_CROP_START = 'cropstart';
+var EVENT_DBLCLICK = 'dblclick';
+var EVENT_TOUCH_START = IS_TOUCH_DEVICE ? 'touchstart' : 'mousedown';
+var EVENT_TOUCH_MOVE = IS_TOUCH_DEVICE ? 'touchmove' : 'mousemove';
+var EVENT_TOUCH_END = IS_TOUCH_DEVICE ? 'touchend touchcancel' : 'mouseup';
+var EVENT_POINTER_DOWN = HAS_POINTER_EVENT ? 'pointerdown' : EVENT_TOUCH_START;
+var EVENT_POINTER_MOVE = HAS_POINTER_EVENT ? 'pointermove' : EVENT_TOUCH_MOVE;
+var EVENT_POINTER_UP = HAS_POINTER_EVENT ? 'pointerup pointercancel' : EVENT_TOUCH_END;
+var EVENT_READY = 'ready';
+var EVENT_RESIZE = 'resize';
+var EVENT_WHEEL = 'wheel';
+var EVENT_ZOOM = 'zoom';
+
+// Mime types
+var MIME_TYPE_JPEG = 'image/jpeg';
+
+// RegExps
+var REGEXP_ACTIONS = /^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/;
+var REGEXP_DATA_URL = /^data:/;
+var REGEXP_DATA_URL_JPEG = /^data:image\/jpeg;base64,/;
+var REGEXP_TAG_NAME = /^img|canvas$/i;
+
+// Misc
+// Inspired by the default width and height of a canvas element.
+var MIN_CONTAINER_WIDTH = 200;
+var MIN_CONTAINER_HEIGHT = 100;
+
+var DEFAULTS = {
+ // Define the view mode of the cropper
+ viewMode: 0,
+ // 0, 1, 2, 3
+
+ // Define the dragging mode of the cropper
+ dragMode: DRAG_MODE_CROP,
+ // 'crop', 'move' or 'none'
+
+ // Define the initial aspect ratio of the crop box
+ initialAspectRatio: NaN,
+ // Define the aspect ratio of the crop box
+ aspectRatio: NaN,
+ // An object with the previous cropping result data
+ data: null,
+ // A selector for adding extra containers to preview
+ preview: '',
+ // Re-render the cropper when resize the window
+ responsive: true,
+ // Restore the cropped area after resize the window
+ restore: true,
+ // Check if the current image is a cross-origin image
+ checkCrossOrigin: true,
+ // Check the current image's Exif Orientation information
+ checkOrientation: true,
+ // Show the black modal
+ modal: true,
+ // Show the dashed lines for guiding
+ guides: true,
+ // Show the center indicator for guiding
+ center: true,
+ // Show the white modal to highlight the crop box
+ highlight: true,
+ // Show the grid background
+ background: true,
+ // Enable to crop the image automatically when initialize
+ autoCrop: true,
+ // Define the percentage of automatic cropping area when initializes
+ autoCropArea: 0.8,
+ // Enable to move the image
+ movable: true,
+ // Enable to rotate the image
+ rotatable: true,
+ // Enable to scale the image
+ scalable: true,
+ // Enable to zoom the image
+ zoomable: true,
+ // Enable to zoom the image by dragging touch
+ zoomOnTouch: true,
+ // Enable to zoom the image by wheeling mouse
+ zoomOnWheel: true,
+ // Define zoom ratio when zoom the image by wheeling mouse
+ wheelZoomRatio: 0.1,
+ // Enable to move the crop box
+ cropBoxMovable: true,
+ // Enable to resize the crop box
+ cropBoxResizable: true,
+ // Toggle drag mode between "crop" and "move" when click twice on the cropper
+ toggleDragModeOnDblclick: true,
+ // Size limitation
+ minCanvasWidth: 0,
+ minCanvasHeight: 0,
+ minCropBoxWidth: 0,
+ minCropBoxHeight: 0,
+ minContainerWidth: MIN_CONTAINER_WIDTH,
+ minContainerHeight: MIN_CONTAINER_HEIGHT,
+ // Shortcuts of events
+ ready: null,
+ cropstart: null,
+ cropmove: null,
+ cropend: null,
+ crop: null,
+ zoom: null
+};
+
+var TEMPLATE = '' + '
' + '
' + '
' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '
' + '
![]()
or