How do I print the protruding part of the image on the next page in Firefox?

<body>
    <canvas width="500px" height="2000px">/canvas>
    <script>
        varcanvas= document.querySelector('canvas')
        varctx=canvas.getContext('2d')
        ctx.fillStyle="rgb(200,0,0)"
        ctx.fillRect(0,0,100,100)
        ctx.fillRect (400, 0, 100, 100)
        ctx.fillRect(0,1000,100,100)
    </script>
</body>

The html above shows canvas 2000px by 500px.
When you print this, the behavior varies from browser to browser.

Google Chrome (40.0.2214.115) Page 2 prints.The bottom square will appear on the next page
Firefox (35.0.1) Page 2 does not print.The bottom square does not appear

Is there a way to print the protruding part of the image on the next page like Chrome on Firefox?

html firefox

2022-09-30 16:28

1 Answers

You can avoid this problem by dividing the image into several canvas:

<head>
    <style type="text/css"media="screen">
        div#insatsu {display:none;}
    </style>
    <style type="text/css"media="print">
        canvas#displayCanvas {display:none;}
    </style>
</head>

<body>
    <canvas id="displayCanvas" width="500" height="2000">/canvas>

    <divid="insatsu"></div>

    <script>
        varcanvas= document.querySelector('canvas'),
            ctx = canvas.getContext('2d');

        ctx.fillStyle="rgb(200,0,0)";
        ctx.fillRect(0,0,100,100);
        ctx.fillRect (400, 0, 100, 100);
        ctx.fillRect(0,1000,100,100);

        function createSplitCanvases(canvas,ctx,insatsu){
            variable = 0,
                SPLIT_Y = 150;

            insatsu.innerHTML=';

            while(y<=canvas.height){
                var printCanvas= document.createElement('canvas');

                printCanvas.height=SPLIT_Y<(canvas.height-y)?SPLIT_Y:(canvas.height-y);
                printCanvas.width = canvas.width;
                insatsu.appendChild(printCanvas);
                insatsu.appendChild( document.createElement('br'));
                varctx2 = printCanvas.getContext('2d');

                ctx2.putImageData(ctx.getImageData(
                    0, y,
                    canvas.width,
                    (y+SPLIT_Y)>canvas.height?canvas.height:(y+SPLIT_Y)
                ), 0, 0);
                y + = SPLIT_Y;
            }
        }

        createSplitCanvases(
            canvas,
            ctx,
            document.querySelector('#insatsu')
        );
    </script>
</body>

Of course, it's not a very good solution, but as far as I know, Firefox doesn't have any other way, and if you use the element img, the same problem will occur.If anyone knows a better way, please post it.

2022-09-30 16:28

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656