Html 仅在页面上打印画布元素_Html_Canvas

Html 仅在页面上打印画布元素

html canvas

Html 仅在页面上打印画布元素,html,canvas,Html,Canvas,我使用html5中的canvas元素时有点卡住了，我在网上搜索了一个可行的解决方案，但没有结果主要问题是，我想单击一个按钮，只将页面上的canvas元素发送到打印机我尝试过使用toDataUrl（）-但这似乎只会产生一个空白的白色图像，其中没有画布内容我遇到的另一个问题是，尝试使用附加到表单按钮的“onClick”来启动任何javascript函数似乎是暂时的这是我当前的尝试-它确实打开了一个新窗口并尝试将其发送到打印机，并且确实创建了一个base64字符串（使用第二低的document

我使用html5中的canvas元素时有点卡住了，我在网上搜索了一个可行的解决方案，但没有结果

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

我尝试过使用toDataUrl（）-但这似乎只会产生一个空白的白色图像，其中没有画布内容

我遇到的另一个问题是，尝试使用附加到表单按钮的“onClick”来启动任何javascript函数似乎是暂时的

这是我当前的尝试-它确实打开了一个新窗口并尝试将其发送到打印机，并且确实创建了一个base64字符串（使用第二低的document.write行上的“dataUrl”输出进行了测试），但正如前面提到的，图像似乎完全空白！（画布本身肯定是填充的，包括导入的图像和一些文本）

这个函数工作得很好，它从变量中绘制对象并添加文本，但出于某种原因，它似乎阻止我将其作为图像输出。我真的很困惑

我不确定您的代码到底出了什么问题，我怀疑您当前的版本在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();
}

函数printCanvas（el）{
var dataUrl=document.getElementById（el）.toDataURL（）；//尝试使用此var将base64字符串保存到服务器
var windowContent=''；
windowContent+=“”
windowContent+=“打印画布”；
windowContent+=“”
windowContent+=''；
windowContent+=''；
windowContent+=''；
var printWin=window.open（''，''，宽度=340，高度=260'）；
printWin.document.open（）；
printWin.document.write（windowContent）；
printWin.document.close（）；
printWin.focus（）；
printWin.print（）；
printWin.close（）；
}

这在Firefox 4.0每晚版中都会出现。

除了公认的最佳答案之外，还有一个补充：它在Chrome 17.0.942.0 winvista中不起作用，因为打印预览dlg显示在网站本身中，printWin.close（）也会关闭dlg

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

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

画布的内容是什么？你知道画布透明区域下的任何内容都不会包含在数据URL中吗？这是一个加载的图像，上面有一个变量的内容：）ps谢谢你编辑我的问题！我想我现在明白格式了：）那真的很好，谢谢！我想我已经确定，由于我的绘图功能，它无法工作-我尝试过调整它，甚至重新编写它-我是否做错了什么？（已将其添加到顶部的原始问题中）@althefuzz您正在本地文件上测试吗？在

文件：//

URL上加载的文件有很多安全限制，如果您上传到web服务器，应该可以正常工作-我已经更新了示例。这正是问题所在，上传后效果很好，我不知道本地加载的文件有安全限制！谢谢罗伯茨：）

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

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
}

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();
}