如何使用 Umbraco 媒体服务保存事件获取图像宽度



我正在寻找一种方法来获取带有 Umbraco 事件的图像宽度,以验证图像在上传之前是否遵循一定的纵横比。问题是我不知道是否可以将媒体项目转换为图像。我如何获得宽度或高度,这是我到目前为止的事件代码:

public class ImageResizer : ApplicationEventHandler
{
protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
MediaService.Saving += MediaServiceSaving;
}
void MediaServiceSaving(IMediaService sender, SaveEventArgs<IMedia> e)
{
foreach (var mediaItem in e.SavedEntities)
{
Image img = (Image)mediaItem;
double height = img.Height;
double width = img.Width;
string msg = "" + height;
if (height / width != 1)
{
msg = "Ratio is not 1:1. Please make sure the width and height of your image is the same.";
BasePage.Current.ClientTools.ShowSpeechBubble(BasePage.speechBubbleIcon.success, "Error", msg);
}
else
{
//Ducplicate image to images and thubnails of desired choice
//Send images to database - continue normal process
}
}
}
}

只需信任Umbraco,让它努力确定它是否是图像:

public class ImageResizer : ApplicationEventHandler
{
protected override void ApplicationStarted(UmbracoApplicationBase umbracoApplication, ApplicationContext applicationContext)
{
MediaService.Saving += MediaServiceSaving;
}
void MediaServiceSaving(IMediaService sender, SaveEventArgs<IMedia> e)
{
foreach (var mediaItem in e.SavedEntities)
{
//if it's an image, the content type will tell you.
if(mediaItem.ContentType.Alias == "Image")
{
var width = Convert.ToDouble(mediaItem.Properties["umbracoWidth"].Value);
var height = Convert.ToDouble(mediaItem.Properties["umbracoHeight"].Value);
if (height / width != 1)
{                        
//Sending a message will cancel the process, so you don't
//need an else (unless you want to do something else with the image of course.
e.Messages.Add(new EventMessage("Wrong Ratio", "Ratio is not 1:1. Please make sure the width and height of your image is the same.", EventMessageType.Error));                        
}                    
}
}
}
}

你真的不能这样做。首先,IMedia不一定是图像 - 它可以是任何东西(视频,pdf,zip等)。它只是保存在Umbraco媒体库中的项目。您甚至可以说 Umbraco 媒体项甚至不必附加文件(如果需要,它可能还会有多个文件)。

此外 - 即使媒体项实际上是图像,也不能简单地将其强制转换为 .NETImage类,因为它们实际上不是一回事。

您希望在允许保存上传的图像之前验证其是否遵循特定比例。虽然您可以在 Umbraco 中看到上传图像的比例,但这在您的代码运行时并不总是可用的。保存媒体项时,将触发您挂钩的事件。

除了事件处理程序之外,还会将不同的事件处理程序附加到此确切事件。此其他事件处理程序负责根据上载图像的尺寸添加umbracoWidthumbracoHeight属性。因此,您不能真正依赖这些属性在代码运行时始终被分配和可用。您不知道这些事件的确切运行顺序,也不知道在命中代码的那一刻是否实际保留了维度。

要执行要执行的操作,您需要访问正在保存的文件数据,并从中生成内存中的Image并使用它来检查正在上传的图像的尺寸。

总而言之,我真的不认为你在这里的尝试是解决这个问题的最佳方法。如果有人上传了多张只允许其中一半的图像 - 您将如何处理这种情况? 用户不太清楚哪些文件是正确的,哪些文件不正确,当只是显示通知气泡时。除此之外 - 你并没有真正阻止上面的代码示例中的任何内容。您只是显示通知错误 - 但即使比例不正确,文件仍会被保存。

然后是挂接到常规事件(如媒体服务上的Saving事件)的问题。这用于保存的任何类型的媒体 - 因此首先,您需要确保代码仅在您希望其上运行的内容上运行。这意味着将其限制为仅在实际上传图像时运行。但是,您很可能也希望将其限制为仅在特定情况下发生的上传上运行(无论如何,您似乎都不希望上传符合 1:1 的比例)。

我认为解决您问题的最佳方法是考虑为媒体库创建自定义图像上传编辑器,该编辑器仅直接在 javascript 中检查图像,是否符合您的比率要求。这将确保您可以以一种很好的方式处理人们尝试输入大小不正确的图像的情况 - 在让他们尝试保存媒体项之前显示警告并使 UI 的状态无效。

它还将更加灵活,因为它不会干扰您网站中的所有媒体保存 - 代码只会处理使用此特定属性编辑器进行上传的上传。


我还强烈建议您花一点时间研究 Umbraco 中ImageProcessor和图像裁剪器的功能。它基本上允许您设置要包含图像的特定预设大小。上传图像时,您可以精确指定希望如何针对特定大小裁剪/调整此图像的大小。然后可以在您的标记中使用这些裁剪,Umbraco 将确保以您在模板中请求的特定大小调整、裁剪、缓存和输出您网站中的图像。

您可以在此处阅读有关它的更多信息:https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper

最新更新