ImageResizer - 如何动态定位文本水印

时间:2013-09-18 19:01:23

标签: .net asp.net-mvc-4 imageresizer

对于那些像我一样苦苦思索ImageResizer糟糕文档的人,只要添加水印文本,下面的代码就可以了:

var c = Config.Current;
var wp = new WatermarkPlugin();  --> be sure to include
wp.Install(c);                   --> be sure to include   
wp = c.Plugins.Get< WatermarkPlugin >(); -- be sure to include (ignore spaces in <>*)

var t = new TextLayer { Text = "Hello ", Fill = true };
var i = new ImageLayer(c);
const string dest = @"c:\tmp\Image16a.png";
var source = Server.MapPath("~/image.png");    
wp.NamedWatermarks["img"] = new Layer[] { i }; 
wp.NamedWatermarks["text"] = new Layer[] { t };
c.CurrentImageBuilder.Build(source, dest, new ResizeSettings("watermark=text;name=John Doe"));

然而,如何允许用户选择放置文字水印的位置?再次,我在文档中找不到任何相关信息?

1 个答案:

答案 0 :(得分:1)

这些是您的变量t的属性,可以设置为像素或百分比......还有许多其他设置可以应用于t

var t = new TextLayer { Text = "Hello #{name}", Fill = true};
t.Top = new DistanceUnit(0, DistanceUnit.Units.Pixels);
t.Left = new DistanceUnit(50, DistanceUnit.Units.Percentage);

更新:例如,以下是使用jCrop跟踪/保存裁剪值的方法。您可以看到我用来进行裁剪的工具让我在更改任何内容时触发javascript函数(showCoords),这就是我记录用户想要裁剪的当前尺寸的位置。

$(document).ready(function() {
    $('#<%= _cropImage.ClientID %>').Jcrop({
        aspectRatio: 3 / 4,
        onChange: showCoords,
        onSelect: showCoords,
        onRelease: showCoords
    });
});

function showCoords(c)
{
    $("#<%= _cropInfo.ClientID %>").val(c.x + "," + c.y + "," + c.x2 + "," + c.y2);
}

因此,当页面被回发时,我使用_cropInfo的值来知道我应该裁剪的位置。无论您使用什么来让用户在图像周围移动文本都应该有类似的东西。