Question

我使用以下代码打印我的画布，并想知道是否可以执行toDataURL({multiplier: 4})之类的操作？我插上电源但实际上看不到任何地方。不确定是否值得拥有此功能，或者是否有办法实现此目的。

提前致谢！

function printCanvas() {
var dataUrl = document.getElementById('c').toDataURL(/* data multiplier here? */); //attempt to save base64 string to server using this var  
  var windowContent = '<!DOCTYPE html>';
  windowContent += '<html>'
  windowContent += '<head><title>Print canvas</title></head>';
  windowContent += '<body>'
  windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
  windowContent += '</body>';
  windowContent += '</html>';
  var printWin = window.open('', '', 'width=340,height=260');
  printWin.document.open();
  printWin.document.write(windowContent);
}

Answer 1

您可以尝试创建一个根据需要缩放的新画布，然后在那里绘制原始画布内容，然后使用新画布toDataURL()创建图像。

        var canvas = document.getElementById("c");
        var tempCanvas;
        var tempCanvasCtx;

        function printCanvas() {
            var tempCanvas = document.createElement('canvas');
            tempCanvas.width = canvas.width;
            tempCanvas.height = canvas.height;
            tempCanvasCtx = tempCanvas.getContext("2d");
            tempCanvasCtx.scale(1.5, 1.5);
            tempCanvasCtx.drawImage(canvas, 0, 0);
            var dataUrl = tempCanvas.toDataURL(); //attempt to save base64 string to server using this var  
            var windowContent = '<!DOCTYPE html>';
            windowContent += '<html>'
            windowContent += '<head><title>Print canvas</title></head>';
            windowContent += '<body>'
            windowContent += '<img src="' + dataUrl + '" onload=window.print();window.close();>';
            windowContent += '</body>';
            windowContent += '</html>';
            var printWin = window.open('', '', 'width=340,height=260');
            printWin.document.open();
            printWin.document.write(windowContent);
        }

如何打印更大版本的fabricjs画布？

1 个答案: