如何使用 javascript 打印畫布內容

Question

我正在使用canvas使用 jsp 頁面進行寫作。 我可以在畫布上寫任何消息，（我創建的畫布消息..） 在此處輸入圖片說明 但是在此之后，當我想使用javascript print code打印此畫布消息時，我無法打印畫布內容。 下面你可以看到打印預覽..

我想打印我在畫布上創建的畫布消息。 請幫我解決這個問題，任何幫助將不勝感激..

Answer 1

當對話框顯示時，您的畫布可能會被清除 - 這通常發生在 Chrome 瀏覽器中。

沒有源代碼可以嘗試，因為你沒有發布任何我會做出一個理論上的答案，你可以嘗試 - 我會建議兩種可能的解決方案：

為resize添加一個事件處理程序。 當觸發重繪內容時（這意味着您需要存儲您繪制的點等或制作屏幕外畫布來存儲副本）。 我經歷過當對話框清除畫布時會觸發此事件（在 Chrome 中） - 如果它適用於打印預覽我不確定 - 如果不嘗試下一點：
當您單擊打印按鈕時，將畫布提取為圖像並用圖像元素替換（臨時）畫布元素，將源設置為畫布中的數據 uri。 在圖像的 onload 處理程序上觸發打印代碼：

第二點的例子：

/// create a reference to canvas element
var canvas = document.getElementById('myCanvas');

printBtn.addEventListener('click' function() {

    /// remove it from DOM (use parent element if any, for demo I use body)
    document.body.removeChild(canvas);

    var img = new Image;

    img.id = 'tempPrintImage';    /// give an id so we can remove it in next step
    img.onload = print;           /// onload handler triggers your print method
    img.src = canvas.toDataURL(); /// set canvas image as source

    document.body.appendChild(img);

}, false);

function print() {

    ...your print code here. On return reverse the elements: ...

    var img = document.getElementById('tempPrintImage');
    document.body.removeChild(img);
    document.body.appendChild(canvas);
}

代碼可能看起來有點過載，但這里的關鍵點是保留畫布的內容。 您可以將圖像放在頂部等等。

Answer 2

根據pc-shooter評論，我的問題得到了解決..

Jsp頁面代碼：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
    //alert('ready');
    var w = window.innerWidth;
    var h = window.innerHeight;
    //alert('w '+w+' h '+h);

    //alert('ready end');
} );

</script>

<script type="text/javascript">
    var canvas, ctx, flag = false,
            prevX = 0,
            currX = 0,
            prevY = 0,
            currY = 0,
            dot_flag = false;

    var x = "black",
            y = 2;

    function init() {
        //alert('init start');

        w = window.innerWidth - 50;
        h = window.innerHeight - 100;
        //alert('canvas 1 w '+w+' h '+h);
        document.getElementById('can').width=w;
        document.getElementById('can').height=h;

        //document.getElementById('can').setAttribute("style","width:900px");


        canvas = document.getElementById('can');
        w = canvas.width;
        h = canvas.height;
        //alert('canvas 2 w '+w+' h '+h);

        ctx = canvas.getContext("2d");

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);

      //  alert('init end');
    }

    function color(obj) {
        switch (obj.id) {
            case "green":
                x = "green";
                break;
            case "blue":
                x = "blue";
                break;
            case "red":
                x = "red";
                break;
            case "yellow":
                x = "yellow";
                break;
            case "orange":
                x = "orange";
                break;
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        if (x == "white") y = 14;
        else y = 2;

    }

    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear..?");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";

        document.getElementById("imageDownload").href = dataURL;

    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
</script>


</head><body onload="init()">


<div style="" >
    <canvas id="can" style="border:2px solid;cursor: pointer;"></canvas>
</div>

<div style="height: auto;width: 810px;">
    <table style="width: 200px;border: 1px solid black; float: left;" >
        <tr><td></td><td colspan="7">Choose Color</td></tr>
        <tr>
            <td style="width: 12.5%">&nbsp;</td>
            <td style="width: 12.5%"><div style="width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div></td>
            <td style="width: 12.5%"><div style="width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div></td>
            <td style="width: 12.5%"><div style="width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div></td>
            <td style="width: 12.5%"><div style="width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div></td>
            <td style="width: 12.5%"><div style="width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div></td>
            <td style="width: 12.5%"><div style="width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div></td>
            <td style="width: 12.5%">&nbsp;</td>
        </tr>
    </table>

    <table style="margin-left:10px; width: 50px;border: 1px solid black;float: left;" >
        <tr><td>Eraser</td></tr>
        <tr>
            <td><div style="width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div></td>
        </tr>
    </table>

    <table style="width: 300px;border:0; float: left;margin-left: 25px;" >
        <tr><td></td><td colspan="7"></td></tr>
        <tr>
            <td style="width: 25px">&nbsp;</td>
            <td style="width: 100px"><input type="button" value="save" id="btn" size="30" onclick="save()" style=""></td>
            <td style="width: 10px">&nbsp;</td>
            <td style="width: 100px"><input type="button" value="clear" id="clr" size="23" onclick="erase()" style=""></td>
            <td style="width: 10px">&nbsp;</td>
            <td style="width: 100px"><input type="button" value="print" id="prnt" size="23" onclick="window.print()" style=""></td>
            <td style="width: 55px">&nbsp;</td>
        </tr>
    </table>

    <input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />

        <script type="text/javascript">
            // Send the canvas image to the server.
            $(function() {
                $("#btnSave").click(function() {
                    var image = document.getElementById("can").toDataURL("image/png"); 
                    image = image.replace('data:image/png;base64,', ''); 
                    $.ajax({
                        type: 'POST',
                        url: 'CanvasSave.jsp',
                        data:{'imageData':image},
                        dataType : 'json',
                        accepts: {json: 'application/json'},
                        success: function(msg) { alert('4');
                            alert('Image saved successfully !');
                        }
                    });
                });
            });
        </script>
</div>

<br /><br />

<div style="height: auto;width: 810px;">
    <a href="#" download="ImageName" title="ImageName" id="imageDownload">
        <img id="canvasimg" style="top:20px;">
    </a>
</div>



</body></html>

Answer 3

這為我做到了：

// Get URL beforehand to reduce delay between write and print
// (probably unnecessary but just being on the safe side)
let url = my_canvas.toDataURL();

// New tab to isolate canvas for printing
let win = window.open();

// 'img' element will show url as image
win.document.write("<img src='" + url + "'/>");

// Print preview shows empty page... almost as if to be called before write
//win.print();

// Magically seems to cause print to be called after write
win.setTimeout(() => win.print(), 0);

如何使用 javascript 打印畫布內容

問題描述

3 個解決方案

解決方案1
2

解決方案2
0 已采納 2014-02-08 04:55:07

解決方案3
0 2021-03-23 15:32:41

如何使用 javascript 打印畫布內容

問題描述

3 個解決方案

解決方案1 2

解決方案2 0 已采納 2014-02-08 04:55:07

解決方案3 0 2021-03-23 15:32:41

解決方案1
2

解決方案2
0 已采納 2014-02-08 04:55:07

解決方案3
0 2021-03-23 15:32:41