base64文字列をpngファイルに変換
HTML5のcanvasを使って手書き署名をするアプリを作りました。
直接画像で保存できないので、Form Javascript APIを使って文字列型項目にbase64文字列で保存する事にしました。
スクリプトタスクを使って、そのbase64文字列を画像としてファイル型に変換したいのですが、うまくできません。
下記コードでファイルは作られますが、png形式として開けないです。
アドバイスいただけないでしょうか。
let base64String= engine.findDataByVarName("文字型項目").split(',')[1];
let files = new java.util.ArrayList();
files.add(new com.questetra.bpms.core.event.scripttask.NewQfile("test.png","image/png",base64.decodeFromString(base64String) ));
engine.setDataByVarName("ファイル型項目", files);
-
すみません。自己解決しました。
「decodeFromUrlSafeStringToByteArray」を使うのが正しいです。
また、CanvasのtoDataUrlで取得したbase64文字列はそのままではデコードできないので、+/＝を置換してから処理しました。
let base64String= engine.findDataByVarName("文字列型項目").split(',')[1];
base64String=base64String.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
let files = new java.util.ArrayList();
files.add(new com.questetra.bpms.core.event.scripttask.NewQfile("test.png","image/png",base64.decodeFromUrlSafeStringToByteArray(base64String) ));
engine.setDataByVarName("ファイル型項目", files); -
返信ありがとうございます。戻り値の型をきちんと確認していませんでした。すみません。
せっかくなので、ガイドパネルに入れている署名欄も載せておきますね。尚、CSSはBootstrapを別のガイドパネルに入れて使ってます。
<div id="candiv" style="border: 1px dotted #999999;max-width: 755px;"></div>
<div class="btn btn-warning" id="btClear">クリア</div>
<div class="btn btn-success" id="btCreate">署名</div>
<script>
const btClear = document.getElementById('btClear');
btClear.addEventListener("click",clearCan,false);
const btCreate = document.getElementById('btCreate');
btCreate.addEventListener("click",createUrl,false);
const candiv = document.getElementById('candiv');
can = document.createElement("canvas");
can.width = 750;
can.height = 150;
candiv.appendChild(can);
can.addEventListener("touchstart",onDown,false);
can.addEventListener("touchmove",onMove,false);
can.addEventListener("touchend",onUp,false);
can.addEventListener("mousedown",onMouseDown,false);
can.addEventListener("mousemove",onMouseMove,false);
can.addEventListener("mouseup",onMouseUp,false);
ct=can.getContext("2d");
ct.strokeStyle="#000000";
ct.lineWidth=5;
ct.lineJoin="round";
ct.lineCap="round";
clearCan();
function onDown(event){
mf=true;
ox=event.touches[0].pageX-event.target.getBoundingClientRect().left;
oy=event.touches[0].pageY-event.target.getBoundingClientRect().top;
event.stopPropagation();
}
function onMove(event){
if(mf){
x=event.touches[0].pageX-event.target.getBoundingClientRect().left;
y=event.touches[0].pageY-event.target.getBoundingClientRect().top;
drawLine();
ox=x;
oy=y;
event.preventDefault();
event.stopPropagation();
}
}
function onUp(event){
mf=false;
event.stopPropagation();
}
function onMouseDown(event){
ox=event.clientX-event.target.getBoundingClientRect().left;
oy=event.clientY-event.target.getBoundingClientRect().top ;
mf=true;
}
function onMouseMove(event){
if(mf){
x=event.clientX-event.target.getBoundingClientRect().left;
y=event.clientY-event.target.getBoundingClientRect().top ;
drawLine();
ox=x;
oy=y;
}
}
function onMouseUp(event){
mf=false;
}
function drawLine(){
ct.beginPath();
ct.moveTo(ox,oy);
ct.lineTo(x,y);
ct.stroke();
}
function clearCan(){
ct.fillStyle="rgb(255,255,255)";
ct.fillRect(0,0,can.getBoundingClientRect().width,can.getBoundingClientRect().height);
}
function createUrl(){
qbpms.form.set("文字列型項目", can.toDataURL());
}
</script>
サインインしてコメントを残してください。
コメント
3件のコメント