How to save HTML5 canvas images as attachments and present them in RichText fields in the Basic Notes Client with XPages

Question

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.)

stwissel stwissel · Accepted Answer · 2014-07-16T02:50:27

What you get from your convertStream function is a MIME document with ONE mime part of type image/png: your attachment. What is missing is a second part of type text/html that has an img tag and eventually some additional text. Something along the line:

htmlMe = body.createChildEntity();
textStream = ns.createStream();
textStream.writeText("<html><body>");
textStream.writeText("<img src=\"..this is the tricky part..\" />");
textStream.writeText("</body></html>");
htmlMe.setContentFromText(textStream,"text/html",MIMEEntity.ENC_[whatever]);

The tricky part is the URL, that needs to point to your attachment. Actually not too tricky. It takes the format:

<img src="cid:_2_DD6FBEF0DD6FBD9C000F014148257D17" />

and cid refers to a header that you have to add to your image attachment:

 Content-Type: image/jpeg
 Content-ID: <_2_DD6FBEF0DD6FBD9C000F014148257D17>

I picked that from a sample message I my understanding is, that you do need the < > around the content id.

How to save HTML5 canvas images as attachments and present them in RichText fields in the Basic Notes Client with XPages

1 Answers