have a backward compatibility issue of presenting the results of an HTML5 Canvas control (based on Dec's blog post and the OpenNTF Project)
I have built logic to create a PNG attachment using MIME, but it is saved as MIME and the rich-text field only shows it as an attachment. The session.setConvertMime(true)
is being ignored.
Client side submission code:
var sig = x$("#{id:canvasOutput1}").val();
// Verify that they have signed the canvas area.
if(sig.length == 0) {
alert("Please sign above before submitting.");
return false;
}
// Get the image data and but it into a hidden field for submissio
var wcanvas = document.getElementById("#{id:canvasArea1}");
var dataURL = wcanvas.toDataURL();
x$("#{id:imgBase64EB1}").val(dataURL);
return true;
Server side SSJS submission code:
var img64 = sigdoc.getItemValue("imgBase64").get(0);
try {
var dt:Date = new Date();
session.setConvertMime(true);
var tdoc:NotesDocument = database.createDocument();
tdoc.replaceItemValue("Form", "TestSignature");
tdoc.replaceItemValue("Subject", "Created: " + dt.toLocaleString());
tdoc.replaceItemValue("imgBase64", sigdoc.getItemValue("imgBase64"));
tdoc.replaceItemValue("signature", sigdoc.getItemValue("signature"));
// Convert the canvas image to a mime element in the document
importPackage(com.healthspace.tools);
var cis = new CanvasImageSaver();
tdoc = cis.convertStream(tdoc, img64, "Signature1");
if (tdoc != null) {
session.setConvertMime(true);
tdoc.save();
context.redirectToPage("test_signature.xsp");
}
} catch(e) {
e.printStackTrace();
}
The convertStream method in the package is:
public Document convertStream(Document doc, String imgBase64, String fldname) {
Session ns = Factory.getSession()
Stream stream = null;
MIMEEntity body = null;
MIMEEntity imgMe = null;
try {
//remove the header stuff...
String buffer = imgBase64.replace("data:image/png;base64,", "");
ns.setConvertMime(true);
body = doc.createMIMEEntity(fldname);
imgMe = body.createChildEntity();
stream = ns.createStream();
stream.writeText(buffer);
imgMe.setContentFromText(stream, "image/png", MIMEEntity.ENC_BASE64);
stream.truncate();
stream.close();
return doc;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
The issues are that the rendered richtext field has a PNG attachment in it but does not present well. How can this be converted to an in-line image so the Notes and XPages versions of the app work the same?
(Note: I am using the openntf domino api and Twitter bootstrap throughout this app.)