选中单元格转换为图片报错

在选中单元格内包含了背景图，在转换图片过程中会报错，代码如下

首先插入背景图：

var style = new GC.Spread.Sheets.Style();
style.backColor = "lightgreen";
style.backgroundImage = "https://cdn.grapecity.com.cn/online/%E7%AB%8B%E5%8D%B3%E4%B8%8B%E8%BD%BD_spjs.png";
sheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);

然后截图

let oldPrintInfo = window.sheet.printInfo();
        let printInfo = new GC.Spread.Sheets.Print.PrintInfo()
        //打印质量大于4时才会生成图片
        printInfo.qualityFactor(5)
        printInfo.margin({
            top: 0,
            bottom: 0,
            left: 0,
            right: 0,
            header: 0,
            footer: 0
        });
        printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
        printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
        printInfo.paperSize(new GC.Spread.Sheets.Print.PaperSize(GC.Spread.Sheets.Print.PaperKind.a3))
        printInfo.showBorder(false)
        printInfo.showGridLine(true)
        let selection = window.sheet.getSelections()[0]
        printInfo.rowStart(selection.row);
        printInfo.rowEnd(selection.row + selection.rowCount - 1);
        printInfo.columnStart(selection.col);
        printInfo.columnEnd(selection.col + selection.colCount - 1);
        printInfo.fitPagesTall(1);
        printInfo.fitPagesWide(1);

        window.sheet.printInfo(printInfo)
        window.spread.bind(GC.Spread.Sheets.Events.BeforePrint + ".screenshot", (s, e) => {
          console.log(s,e, 'sdfeefee')
            let iframe = e.iframe
            let imgs = iframe.contentWindow.document.getElementsByTagName("img")
            if (imgs && imgs.length) {
                let img = imgs[0]
                console.log(img)
                let canvas = document.createElement("canvas")
                canvas.height = img.naturalHeight
                canvas.width = img.naturalWidth
                let ctx = canvas.getContext('2d')
                ctx.fillRect(0, 0, canvas.width, canvas.height)
                ctx.drawImage(img, 0, 0)
                console.log( Math.floor(canvas.height / 800), ' Math.floor(canvas.height / 800)')
                for (let i = 0; i < Math.floor(canvas.height / 800); i++) {
                  ctx.font = '100px Arial';
                  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; // 水印颜色和透明度
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'middle';
                  ctx.translate(canvas.width / 10, canvas.height / 4);
                  // ctx.rotate(-Math.atan(canvas.height / canvas.width));
                  ctx.fillText('songyinglei', 0, 0);
                }
                canvas.toBlob((blob) => {
                    resolve(blob)
                    // navigator.clipboard.write([
                    //         new ClipboardItem({
                    //         [blob.type]: blob
                    //         })
                    //     ]);
                })
                e.cancel = true
                window.spread.unbind(GC.Spread.Sheets.Events.BeforePrint + ".screenshot")
                window.sheet.printInfo(oldPrintInfo)
            }
        })
        window.spread.print(window.spread.getActiveSheetIndex());

报错如下：

要改两个地方：

1.style中要加typeName，用于序列化反序列化
2.图片不能是连接，需要转成base64。
否则会有Failed to execute 'toDataURL' on 'HTMLCanvasElement'异常
原因是安全限制：如果画布上的数据源自不同的域，则会引发安全错误。确保画布上的内容不是跨域的图片或其他资源。是canvas的规定。

您好，您问题中的”然后截图“是什么意思呢？
以及第二段代码是点击按钮后触发吗？


在SpreadJS中提供了上传图片，下载图片的功能。
学习链接是：
https://demo.grapecity.com.cn/sp ... /file-upload/purejs
支持文件，图片的上传，下载以及图片的预览功能

Ellia.Duan 发表于 2024-7-25 18:13
您好，您问题中的”然后截图“是什么意思呢？
以及第二段代码是点击按钮后触发吗？

是点击按钮截取选中区域，然后报错，现在我放的是单元格背景图，不是这个类型的图
我要实现的是这个功能：https://docs.grapecity.com.cn/sp ... t-of-selected-range

上面这个功能里，如果有单元格背景图会报错

Clark.Pan 发表于 2024-7-26 10:23
要改两个地方：

1.style中要加typeName，用于序列化反序列化

明白了，感谢

Clark.Pan 发表于 2024-7-25 15:13
要改两个地方：

1.style中要加typeName，用于序列化反序列化

请问如果这个图片有没有在打印的时候，提供转换时机，一定要在插入的时候是base64吗？我们之前已经插入的怎么处理

这个没有，需要您自行转一下

Clark.Pan 发表于 2024-7-26 12:26
这个没有，需要您自行转一下

好的

Clark.Pan 发表于 2024-7-26 12:26
这个没有，需要您自行转一下

请问一下，如果单元格有iconfont，显示不出来如何处理