Question

存在向后兼容性问题，表示HTML5 Canvas控件的结果（基于Dec's blog post和OpenNTF Project）

我已经构建了使用MIME创建PNG附件的逻辑，但它保存为MIME，而富文本字段仅将其显示为附件。 session.setConvertMime(true)被忽略。

客户端提交代码：

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;

服务器端SSJS提交代码：

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();
}

包中的convertStream方法是：

    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;
        }
    }

问题在于渲染的richtext字段中包含PNG附件，但效果不佳。如何将其转换为内嵌图像，以便应用程序的Notes和XPage版本的工作方式相同？

（注意：我在这个应用程序中使用的是openntf domino api和Twitter bootstrap。）

Answer 1

你从convertStream函数得到的是一个MIME文档，其中包含一个类型为image / png的mime部分：你的附件。缺少的是text / html类型的第二部分，它有一个img标签，最后还有一些附加文本。沿线的东西：

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]);

棘手的部分是URL，需要指向您的附件。其实不太狡猾。它采用以下格式：

<img src="cid:_2_DD6FBEF0DD6FBD9C000F014148257D17" />

和cid指的是您必须添加到图片附件的标题：

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

我从一个示例消息中选择了我，我的理解是，你确实需要＆lt; ＆GT;围绕内容ID。

如何将HTML5画布图像另存为附件，并将它们显示在带有XPage的Basic Notes客户端的富文本字段中

1 个答案: