Question

我的目标是使用jsrasign签名JPEG文件：https://github.com/kjur/jsrsasign

有一个用于签署普通字符串的演示：https://kjur.github.io/jsrsasign/sample/sample-rsasign.html

如何使用此演示将其用于JPEG文件？我找不到将JPEG文件的完整未修改二进制文件保存在变量中的方法。

但是我需要这样做，因为如果图像的二进制文件更改或不同，则验证将失败。

代码如下：

<?php

namespace App;

use TCG\Voyager\Traits\Resizable;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
use App\Category;


class Post extends Model
{
  use Resizable;
  use SoftDeletes;

  protected $dates = ['deleted_at'];

  public function category()
  {
    return $this->belongsTo(Category::class);
  }

  public function scopeIspublished($query)
  {
    return $query->where('status','published');
  }
}

不是获取输入文本的值

<html>
<head>
<title>Beispiel Applikation für Signaturen per JS</title>
<script language="JavaScript" type="text/javascript" src="https://kjur.github.io/jsrsasign/jsrsasign-all-min.js"></script>

<script language="JavaScript" type="text/javascript">
function doSign() {
  var sigpw = document.form1.pwsig.value;
  var rsa = new RSAKey();
  var decryptedKeyHex = KEYUTIL.getDecryptedKeyHex(document.form1.prvkey1.value, sigpw);
  rsa.readPKCS5PrvKeyHex(decryptedKeyHex);
  var hashAlg = document.form1.hashalg.value;
  var hSig = rsa.sign(document.form1.msgsigned.value, hashAlg);
  document.form1.siggenerated.value = linebrk(hSig, 64);
}

function doVerify() {
  var sMsg = document.form1.msgverified.value;
  var hSig = document.form1.sigverified.value;

  var pubKey = KEYUTIL.getKey(document.form1.cert.value);
  var isValid = pubKey.verify(sMsg, hSig);

  // display verification result
  if (isValid) {
    _displayStatus("valide");
  } else {
    _displayStatus("invalide");
  }
}

function copyMsgAndSig() {
  _displayStatus("reset");
  document.form1.msgverified.value = document.form1.msgsigned.value; 
  document.form1.sigverified.value = document.form1.siggenerated.value; 
}

function _displayStatus(sStatus) {
  var div1 = document.getElementById("verifyresult");
  if (sStatus == "valide") {
    div1.style.backgroundColor = "skyblue";
    div1.innerHTML = "Die Signatur ist *VALIDE*.";
  } else if (sStatus == "invalide") {
    div1.style.backgroundColor = "deeppink";
    div1.innerHTML = "Die Signatur ist *NICHT VALIDE*.";
  } else {
    div1.style.backgroundColor = "yellow";
    div1.innerHTML = "Bitte Felder ausfüllen und Jetzt signieren klicken.";
  }
}

</script>
<style type="text/css">
TD  {vertical-align: top}
</style>
</head>
<body>
<h1>Beispiel Applikation für Signaturen per JS</h1>

<form name="form1">
<table border="0">
<tr><th>Signieren</th><th></th><th>Verifizieren</th></tr>

<tr>
<td>
PEM RSA Privater Schüssel<br/>
<!-- _test/z5.* for X.509v1 certificate and private key -->
<textarea name="prvkey1" rows="10" cols="65">
Hier deinen privaten Schlüssel einfügen.
</textarea><br/>
Welcher Text soll signiert werden?.<br/>
<input type="text" name="msgsigned" value="Dein Text"/><br/>
Bitte Passwort eingeben:<br/>
<input type="text" name="pwsig" size="20"/><br/>
</td>
<td></td>
<td>
Ergebnisse der Verifikation
<div id="verifyresult" style="background: yellow">Bitte Felder ausfüllen und auf Jetzt signieren klicken</div>
</td>
</tr>

<tr>
<td>
<select name="hashalg">
<option value="sha1" selected>SHA1
<option value="sha256">SHA256
<option value="sha512">SHA512
<option value="md5">MD5
<option value="ripemd160">RIPEMD-160
</select>
<input type="button" value="Jetzt signieren" onClick="doSign();"/><br/>
</td>
<td>
<input type="button" value="Kopieren" onClick="copyMsgAndSig();"/><br/>
</td>
<td>
<input type="button" value="Signatur verifizieren" onClick="doVerify();"/><br/>
</td>
</tr>

<tr>
<td>
Generierte Signatur<br/>
<textarea name="siggenerated" rows="4" cols="65"></textarea>
</td>
<td>
</td>
<td>
Signatur verifizieren<br/>
<textarea name="sigverified" rows="4" cols="65">
Hier steht bald deine Signatur
</textarea><br/>
Welcher Text soll verifiziert werden?<br/>
<input type="text" name="msgverified" value="Dein Text"/><br/>
Öffentlicher Schlüssel des Urhebers.<br/>
<textarea name="cert" rows="10" cols="65">
Hier deinen öffentlichen Schlüssel einfügen.
</textarea><br/>
</td>
</tr>

</table>
</form>



</body>
</html>

我想在这里在变量中注入JPEG

document.form1.msgsigned.value

图片将由用户在其智能手机上拍摄。如果这仅不适用于JS，我也可以使用Cordova或其他选项，但是在普通JS中做到这一点将是很棒的。

Answer 1

您需要输入CheckSpelling和file类型的输入（后者是可选的，但会立即打开相机，而不是先要求选择文件）。在此INPUT上监听accept="image/*;capture=camera"事件，然后使用FileReader API读取文件-二进制或DataURI。

将JPEG作为二进制文件加载到JavaScript中的变量中

1 个答案: