仅在页面上打印画布元素

发布于 2024-10-12 04:23:56 字数 2535 浏览 1 评论 0原文

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

主要问题是我想单击一个按钮并将页面上的画布元素发送到打印机。

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

我遇到的另一个问题是，尝试使用附加到表单按钮的“onClick”来启动任何 JavaScript 函数似乎充其量是脾气暴躁的！

这是我当前的尝试 - 从某种意义上说，它确实打开了一个新窗口并尝试将其发送到打印机，并且它确实创建了一个 base64 字符串（使用第二低的 document.write 行上的“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()”开始的代码当前取自教程，而不是我自己的作品！

目前正在使用调用 - 由于某种原因，我根本无法使用按钮让它工作（下面的一小块代码是我的尝试这似乎失败了）

<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
}

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

原文

im a little stuck using the canvas element in html5, have scoured the net looking for a workable solution but to no avail!

the main issue is that I want to click a button and send just the canvas element on the page to the printer.

i have tried using toDataUrl() - but this just seems to be resulting in a blank white image which has none of the canvas content!

the other issue i am experiencing is that attempting to initiate any javascript functions using "onClick" attached to a form button seems to be being tempermental at best!

here is my current attempt - this works in the sense that it does open a new window and attempt to send it to printer and it does create a base64 string (tested this using the "dataUrl" output on the second lowest document.write line) but as previously mentioned the image appears to be completely blank! (the canvas itself is definitely filled, both with an imported image and some text)

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

note: the code from "win = window.open()" onwards is currently taken from a tutorial and not my own work!

it is currently being called using <body onload="printCanv";"> - for some reason I could not get this to work at all using a button (little chunk of code below is my attempt which seemed to fail)

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

apologies is this help request is all over the place! i haven't posted to a site like this before and it didn't like me posting some html/script!

thanks in advance for any help you may be able to offer :)

Edit: draw function:

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
}

This function works perfectly, it draws the object and adds text from the variable, but for some reason it seems to be preventing me from outputting it as an image. I'm really confused!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如果没有 2024-10-19 04:23:56

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

这对我有用< /a> 在 Firefox 4.0 nightly 中。

I'm not sure exactly what's wrong with your code, I suspect in your current version calling printCanv in the body load event will mean you're trying to print the canvas before it's drawn. Running it off the button should work better, I'm not sure why that wasn't working for you as there's no reason in principle why it shouldn't work.

To arrive at a working version I've modified your code slightly:

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

This works for me in the Firefox 4.0 nightly.

回复收藏 0 原文