在页面上只打印canvas元素 [英] printing just canvas element on a page

问题描述

主要的问题是我想要一个可以解决这个问题的方法。点击一个按钮，并只发送页面上的canvas元素到打印机。

我已经尝试使用toDataUrl（） - 但这似乎是一个空白没有画布内容的白色图像！

我遇到的另一个问题是，试图启动任何JavaScript函数使用onClick附加到窗体按钮似乎

这里是我当前的尝试 - 这意味着它打开一个新窗口，并尝试将其发送到打印机，它确实创建一个base64字符串（测试这使用dataUrl输出在第二低的document.write行），但如前所述，图像似乎是完全空白！ （canvas本身是绝对填充的，既有导入的图像和一些文本）

  function printCanv（）
 { 
 var dataUrl = document.getElementById（'copy'）。toDataURL（）; //尝试使用此var 
 document.getElementById（'testBox'）将base64字符串保存到服务器。value = dataUrl; // load data into textarea 
 //尝试打开窗口并添加画布等
 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' >'）; 
（（图像代码在这里，但网站不会让我发布它的某些原因？））
 win.document.write（dataUrl）; 
 win.document.write（'<'+'/'+'body'+'><'+'/'+'html'+'>'）; 
 win.document.close（）; 
 win.print（）; 
 win.close（）; 
} 
  

注意：win = window.open目前从一个教程而不是我自己的工作！

目前正在使用< body onload =printCanv;> 我不能让这个工作在所有使用按钮（下面的一小块代码是我的尝试，似乎失败）

  < input type =buttonid =testvalue =click meonClick =printCanv（）;>< / input> 
  

apologies是这个帮助请求是所有的地方！我没有发布到这样的网站，以前它不喜欢我发布一些html /脚本！

编辑：绘制函数：

  function copydraw（）{//被称为copydraw的函数（可以是任何东西）
 var testimage3 = document.getElementById（' 
 var img3 = new Image（）; //声明名为img3的图像变量
 var testVar = document.getElementById（'userIn'）。value; //从userin框中获取值。仅在浏览器刷新时更新？ 
 img3.onload = function（）{//当图像加载（img.onload）运行此函数
 testimage3.drawImage（img3,0,0）; // drawimgto testimage 
 testimage3.font =30pt'Arial'; // font method varying font attrib（weight，size，face）
 testimage3.fillStyle =＃000000; // sets fill color 
 testimage3.fillText（testVar，310，360）; // filltext方法绘制文本（xup ydown）
} 
 img3.src ='images / liecakeA4.jpg'; //图片来源
} 
  

这个函数完美地工作，文本从变量，但由于某种原因，似乎阻止我输出为一个图像。我真的很困惑！

解决方案

我不知道你的代码有什么问题，我怀疑你当前的版本调用 printCanv 在body load事件中将意味着您正在尝试在绘制之前打印画布。运行它的按钮应该工作更好，我不知道为什么不是为你工作，因为没有理由，为什么它不应该工作。

要达到一个工作版本，我已经稍微修改了你的代码：

  function printCanvas（el）{
 var dataUrl = document.getElementById（el）.toDataURL（）; //尝试使用此var 
将base64字符串保存到服务器var windowContent ='<！！DOCTYPE html>'; 
 windowContent + ='< html>'
 windowContent + ='< head>< title>列印画布< / 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的夜间。

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!

解决方案

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.

这篇关于在页面上只打印canvas元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！