PuppeteerSharp中EvaluateFunctionAsync传参问题：canvas转base64如何正确传参

现有代码的传参问题 #

你当前第二个EvaluateFunctionAsync的写法存在严重不稳定性，属于错误用法：

• 你通过字符串插值直接把base64内容拼接到JS函数定义的代码中，base64包含大量+、/、=等特殊字符，且长度不受限，非常容易触发JS语法错误，当前能正常运行只是巧合，遇到复杂场景必然崩溃。
• 你同时在函数形参列表和实参位置都传入了canvasImage变量，两者逻辑冲突，完全不符合PuppeteerSharp的参数传递规则。

正确传参方式 #

PuppeteerSharp的EvaluateFunctionAsync参数传递规则非常简单：JS函数定义里写几个形参，后面就按顺序传入对应的C#变量即可，不需要手动把变量内容拼到函数代码里。
如果你是需要把拿到的base64绘制回canvas（推测你是要合并多层flot图表的canvas内容才做该操作），正确的代码写法如下：

var canvasItems = await reactElement.QuerySelectorAllAsync("canvas.flot-base");
string combinedBase64 = "";
if(canvasItems != null)
{
    foreach(var canvas in canvasItems)
    {
        // 这行写法是正确的，可以正常拿到当前canvas的base64内容
        var currentBase64 = await canvas.EvaluateFunctionAsync<string>("e => e.toDataURL()");
        combinedBase64 += currentBase64;
        
        // 如果确实需要把base64绘制回当前canvas，按如下方式传参即可
        await canvas.EvaluateFunctionAsync(@"(e, imgBase64) => {
            var ctx = e.getContext('2d');
            var img = new Image();
            img.onload = function() {
                ctx.drawImage(img, 0, 0);
            };
            img.src = imgBase64;
        }", currentBase64);
    }
}

额外优化建议 #

如果你的最终需求只是获取canvas内的图片内容，完全不需要执行后面的drawImage逻辑，第一步拿到的base64就是你需要的结果，后面的绘制操作属于冗余代码，可以直接删掉。
如果你是要合并flot的多层canvas内容，建议单独创建一个新的离屏canvas做合并操作，不要直接修改原页面的canvas，避免影响原页面渲染逻辑。

内容的提问来源于stack exchange，提问作者Harimanda Jerrys Randriamire