用nodejs在EJ中渲染图像数据

Question

我有一个Nodejs Express系统，并希望渲染QR代码Datablock的图像。

我正在从我的词汇架构中生成图像

BaseUserSchema.methods.getProvisionImage = function getProvisionImage() {
    qr.toDataURL( JSON.stringify({
        account: this.accountName,
        code: this.provisionCode,
    }),
    {},
    function (err, url) {

        if (err) throw err;

        return url;
    });
};

，并想在页面上绘制图像

<img class="img-thumbnail m-2 d-block"
     src="<% provisionUser.getProvisionImage() %>"
     title="Click to enlarge" >

正确的供应手是正确的，并且在我进行调试时，在生成代码结束时的值

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK ... [etc]  ... ==

对我来说看起来都很好 - 我该如何将该字符串转换为可以显示的东西？

Answer 1

由于ejs不支持带有回调的异步函数，您唯一的方法可能是使用异步/等待。

您可以尝试以下操作：

BaseUserSchema.methods.getProvisionImage = async function getProvisionImage() {
    var data = '';
    try {
        data = await qr.toDataURL(JSON.stringify({
            account: this.accountName,
            code: this.provisionCode,
        }));
    } catch (e) {}
    return data;
};

编辑

// this function no longer needs to be async since i moved the async code to another async function
BaseUserSchema.methods.getProvisionImage = function getProvisionImage() {
    var data = getData(JSON.stringify({
        account: this.accountName,
        code: this.provisionCode,
    }));

    return data;
};

async function getDataURL(str) {
    var data = '';
    try {
        data = await qr.toDataURL(str);
    } catch (e) {}
    return data;
};

，并解释为什么您代码无法正常工作：

// the getProvisionImage function does not return anything
// since you do not have a return statement in the getProvisionImage scope
BaseUserSchema.methods.getProvisionImage = function getProvisionImage() {
    qr.toDataURL( JSON.stringify({
        account: this.accountName,
        code: this.provisionCode,
    }),
    {},
    function callback(err, url) { // this function is the scope of the return statement bellow

        if (err) throw err;
        // this will return a value to the caller of this function
        // not the caller of getProvisionImage
        return url;
    });
    
    // this return will work, not the above one in the callback function
    return 'data:image/png;bas....';
};

Answer 2

尝试对该方法进行诺言，然后等待结果将其传递给ejs：

BaseUserSchema.methods.getProvisionImage = function getProvisionImage() {

    return new Promise((resolve, reject) => {
    
        qr.toDataURL(JSON.stringify({
                account: this.accountName,
                code: this.provisionCode,
            }), {},
            function(err, url) {

                if (err) reject(err);

                resolve(url);
            });
    });
};

//...

const img = await provisionUser.getProvisionImage();

//...
src="<% img %>"