我正在处理包含jsignature元素的表单，该表格是一个jQuery插件，可存储用户与base64 strings（或其他格式）的签名。
主要问题是，如果我尝试在列表中编辑条目，我需要能够检查签名是否为空。
如此简化；验证base64字符串是否包含黑色或只是纯白色。
现在我采用的不同方法以及为什么失败：
- 保存空签名的源字符串并将其与新签名进行比较
这已经失败了，因为每当我在添加一个条目时有不同的分辨率，源字符串都会与先前保存的一个，空字符串不同。
- 在JS中创建一种方法来计算base64字符串中颜色的百分比（如果不是100％白色，有签名）
这失败了，因为我需要能够存储该方法的值，该方法返回在C＃属性中。但是显然，Razor的C＃部分和内联JS并不同时存在。这是必须检查签名是否为空的签名是必要的
- 创建一种类似的方法，以C＃（在CSHTML中）检查图像的颜色
如果我可以访问应用程序的数据层（我确实拥有哪个OFC，但对于此项目，最好不要更改或在此处添加任何内容）。问题是我无法在CSHTML文件中使用Datatype位图。
我真的只是在寻找可以使用的其他方法，但是如果我要添加任何代码片段，我就很乐意这样做。
任何帮助都将受到赞赏！
编辑：使用CSHTML的代码更新：
@if (!editMode && !formDisabled || signatureEmpty)
{
<div class="form-group" style="margin:5%">
<div class="form-inline" for="sign">
<label class="control-label" style="float:left; margin-top:2%">Unterschrift</label>
<button type="button" class="btn btn-primary" style="float:right; margin-bottom:1%; background-color:dodgerblue" onclick="refreshSignature()"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
<div style="width:100%; margin-left:0%;" height:auto" name="sign">
<div disabled="@formDisabled" id="signature" class="">
</div>
</div>
</div>
}
else if(!signatureEmpty) //signature->show image
{
<div class="form-group" style="margin:5%">
<div class="form-inline" for="signDisabled">
<label class="control-label" style="float:left">Unterschrift</label>
</div>
<img id="testtest" src="@zeitaufzeichnung.Signature"/> <!--format Signature: data:image/png;base64,i1234lkj123;k4;l1j34l1kj3j...-->
</div>
}
else
{
<div class="form-group" style="margin:5%">
<label class="control-label" style="float:left">keine Unterschrift vorhanden</label>
</div>
}
和应该更改C＃signaturee务属性的Java脚本方法（主要是checkifSignatureisempty方法）：
function getColors(ctx) {
// Get the canvas data
var pixels = ctx.getImageData(0, 0, ctx.width, ctx.height),
data = pixels.data,
// Set up our output object to collect color data
output = {};
// For each color we encounter, check the
// output object. If the color already exists
// there, simply increase its counted value.
// If it does not, create a new key.
for (var i = 0; i < data.length; i += 4) {
var r = data[i],
g = data[i + 1],
b = data[i + 2],
col = rgbToHex(r, g, b);
if (output[col])
output[col]++
else
output[col] = 1
}
// Count total
var total = 0;
for (var key in output) {
total = total + parseInt(output[key])
}
output.total = total;
// Return the color data as an object
return output;
}
function checkIfSignatureIsEmpty(source)
{
var img = new Image();
img.src = source;
img.id = "img";
img.name = "img";
img.onload=function(){
var imageData = extract_colors(img);
if (imageData[0] / imageData.total == 1) {
return true;
} else {
return false;
}
}
}
function extract_colors(img) {
var canvas = document.createElement("canvas");
var c = canvas.getContext('2d');
c.width = canvas.width = img.width;
c.height = canvas.height = img.height;
c.clearRect(0, 0, c.width, c.height);
c.drawImage(img, 0, 0, img.width, img.height);
return getColors(c);
}
function rgbToHex(r, g, b) {
return ((r << 16) | (g << 8) | b).toString(16);
}
我终于说服了自己在应用程序的数据层中创建一种方法。
这是任何人需要的代码：
public static bool IsSignatureEmpty(string base64Source)
{
Bitmap signatureBM = null;
try
{
byte[] byteBuffer = Convert.FromBase64String(base64Source.Replace("data:image/png;base64,", ""));
MemoryStream memoryStream = new MemoryStream(byteBuffer);
memoryStream.Position = 0;
signatureBM = (Bitmap)Bitmap.FromStream(memoryStream);
memoryStream.Close();
memoryStream = null;
byteBuffer = null;
}
catch (Exception e)
{
Console.WriteLine("Error: " + e.Message);
}
int width = signatureBM.Width;
int height = signatureBM.Height;
for (int x = 0; x < width; x++)
{
for (int y = 0; y < height; y++)
{
//Name==0 would equal the color white
if (signatureBM.GetPixel(x, y).Name != "0")
{
return false;
}
}
}
return true;
}
如果您真的想使用纯JS/HTML使用上面的JS代码，并请参考Marco的评论：
而不是使用C＃只是设置JavaScript变量。为EditMode使用不同的Querystring或路由值，然后使用JavaScript
隐藏DIV