Question

我使用html5中的canvas元素有点卡住了，已经在网上寻找可行的解决方案，但无济于事！

主要问题是我想点击一个按钮，只将页面上的canvas元素发送给打印机。

我尝试过使用toDataUrl（） - 但这似乎只是导致一张空白的白色图片，没有任何画布内容！

我遇到的另一个问题是尝试使用附加到表单按钮的“onClick”启动任何javascript函数似乎充其量只是一种温度！

这是我当前的尝试 - 这是因为它确实打开了一个新窗口并尝试将其发送到打印机，它确实创建了一个base64字符串（使用第二个最低文档上的“dataUrl”输出进行测试）。写行）但如前所述，图像似乎完全空白！（画布本身绝对是用导入的图像和一些文本填充的）

function printCanv()  
{  
  var dataUrl = document.getElementById('copy').toDataURL(); //attempt to save base64 string to server using this var  
  document.getElementById('testBox').value = dataUrl; //load data into textarea  
  //attempt open window and add canvas etc  
  win = window.open();  
  self.focus();  
  win.document.open();  
  win.document.write('<'+'html'+'><'+'head'+'><'+'style'+'>');  
  win.document.write('body, td { font-family: Verdana; font-size: 10pt;}');  
  win.document.write('<'+'/'+'style'+'><'+'/'+'head'+'><'+'body'+'>');  
  ((image code is here but site will not let me post it for some reason?))  
  win.document.write(dataUrl);  
  win.document.write('<'+'/'+'body'+'><'+'/'+'html'+'>');  
  win.document.close();  
  win.print();  
  win.close();  
}

注意：“win = window.open（）”之后的代码目前来自教程而不是我自己的工作！

目前正在使用<body onload="printCanv";">进行调用 - 由于某种原因，我无法使用按钮完成此操作（下面的一小段代码是我的尝试似乎失败了）

<input type="button" id="test" value="click me" onClick="printCanv();"> </input>

道歉是这个帮助请求到处都是！我以前没有发布到这样的网站，它不喜欢我发布一些HTML /脚本！

提前感谢您提供的任何帮助:)

编辑：绘制功能：

function copydraw() {  //function called "copydraw" (could be anything)
    var testimage3 = document.getElementById('copy').getContext('2d');  //declare variable for canvas overall (inc paths)
    var img3 = new Image();  //declare image variable called "img3"
    var testVar = document.getElementById('userIn').value; //take value from userin box.  only updating on browser refresh?
    img3.onload = function(){  //when image has loaded (img.onload) run this function
        testimage3.drawImage(img3,0,0);  //draw "img" to testimage
        testimage3.font = "30pt 'Arial'"; //font method varies font attrib (weight, size, face)
        testimage3.fillStyle = "#000000"; //sets fill color
        testimage3.fillText(testVar, 310, 360); //filltext method draws text (xup ydown)
        }  
    img3.src = 'images/liecakeA4.jpg';  //source of image
}

此功能完美运行，它绘制对象并从变量中添加文本，但由于某种原因，它似乎阻止我将其作为图像输出。我真的很困惑！

Answer 1

我不确定您的代码究竟出了什么问题，我怀疑在您当前的版本中，在body load事件中调用printCanv意味着您在绘制之前尝试打印画布。从按钮上运行它应该更好，我不知道为什么那不适合你，因为原则上没有理由为什么它不起作用。

为了达到工作版本，我稍微修改了你的代码：

function printCanvas(el) {  
    var dataUrl = document.getElementById(el).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 + '">';
    windowContent += '</body>';
    windowContent += '</html>';
    var printWin = window.open('','','width=340,height=260');
    printWin.document.open();
    printWin.document.write(windowContent);
    printWin.document.close();
    printWin.focus();
    printWin.print();
    printWin.close();
}

每晚在Firefox 4.0中使用works for me。

Answer 2

对于已接受的最佳答案的一个补充：在这里不适用于Chrome 17.0.942.0 winvista，因为print-preview-dlg显示在网站本身和printWin.close（）也将关闭dlg。

因此printWin.close（）必须由用户延迟或启动，但这些都不是好的解决方案。

如果chrome printdlg可以进行回调，那将是最好的，某事。一个人知道，打印已经完成，并且可以关闭窗口。如果这是可能的另一个问题。

在页面上只打印canvas元素

2 个答案: