个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我在使用 html5 中的 canvas 元素时有点卡住了，已经在网上搜索了一个可行的解决方案，但无济于事!
主要问题是我想单击一个按钮并将页面上的 Canvas 元素发送到打印机。
我尝试过使用 toDataUrl() - 但这似乎只会导致一个空白的白色图像，其中没有任何 Canvas 内容!
我遇到的另一个问题是，尝试使用附加到表单按钮的“onClick”来启动任何 javascript 函数似乎充其量是情绪化的!
这是我目前的尝试 - 这在某种意义上是有效的，它确实打开了一个新窗口并尝试将其发送到打印机并且它确实创建了一个 base64 字符串(使用倒数第二个文档上的“dataUrl”输出对此进行了测试。写行)，但如前所述，图像似乎完全空白! ( Canvas 本身肯定是填满的，既有导入的图像也有一些文本)
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
}
这个函数工作得很好，它绘制对象并从变量中添加文本，但出于某种原因，它似乎阻止我将它作为图像输出。我真的很困惑!
最佳答案
我不确定您的代码到底出了什么问题，我怀疑在您当前的版本中，在 body load 事件中调用 printCanv 将意味着您正在尝试在绘制 Canvas 之前打印 Canvas 。从按钮上运行它应该会更好，我不确定为什么它对你不起作用，因为原则上没有理由为什么它不应该起作用。
为了得到一个工作版本，我稍微修改了你的代码:
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();
}
这works for me在 Firefox 4.0 nightly 中。
关于html - 在页面上仅打印 Canvas 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4716756/
25
4
0
有没有更好的方法用 PHP 将数据输出到 html 页面？ 如果我想在 php 中用一些 var 制作一个 div，我会写类似的东西 print (''.$var.''); 或 echo "''.$v
我可以使用 java awt print 来打印文档/文件而不是使用 javax print 吗？我发现在 java awt print 中有一个选项可以使用 AttributedString 将内容
目前我通过以下方式运行 R 脚本: R --slave argument1 argument2 ... 我想知道 R 中关于如何退出脚本并发出警告的最佳实践，q() 会这样做吗？ if(!file.
谁能告诉我如何编写一个程序，用 gcc 编译时打印 c ，用 g++ 编译时打印 c++? 最佳答案 #ifdef __cplusplus printf("c++\n"); #else
我需要支持在 KitKat 设备上打印，但我的目标 SDK 是 13(无法更改)。 特别是我需要打印一个 webview。 这是用于打印 webview 的 API: http://developer
我正在尝试创建一个简单的函数，其中 python 将根据您的年份输入计算年龄。我已经尝试了几种方法，但我没有运气 atm。 附:对不起，我是新手。 ame = input(" Enter your n
JavaFX 2.0 是否支持打印？我有一个文本区域，我从中获取文本然后我想打印它，但似乎没有这个功能。 当然，这里我说的是打印到打印机。 :) 最佳答案 尚不支持。作为一种解决方法，您可以使用 Ja
我试图找出printOn的重点。我查看了一些实现它的类，看起来它只是帮助打印不同数据类型的单位。这是准确的吗？ 如果是这样，有人能指出我如何为我自己的类(class)实现这一点的正确方向吗？我将在可能
我无法让 IE 打印我的 Canvas (使用 excanvas 生成)...我使用的是最新版本的 excanvas。 http://dl.dropbox.com/u/997831/canvas.ht
我搜索了很多但没有人回答我的问题，我读到在这样的信号处理程序中使用 cout 是不安全的: void ctrlZHandler(int sig_num) { //SIGTSTP-18
我有兴趣打印一系列查询。我有以下代码。 start = datetime.datetime(2012, 2, 2, 6, 35, 6, 764) end = datetime.datetime(201
public class javaClass { public static void main(String [] arg) { String row1 = "A____A"
我需要写入前一行的命令，例如不带\n 的 print()。 下面是一些示例代码: a=0 print("Random string value") if a==0: print_to_prev
我有一个使用 UIKit 和 Objective C 的旧 iOS 应用程序，我目前正在将其移植到 SwiftUI 和 Swift。一切都很顺利，我喜欢 Swift 和 SwiftUI。该应用程序已经
我创建了一个求和函数，它接受一个开始编号和一个结束编号，并返回这两点之间的总和答案 def print_sum_equations(start_number,end_number):
在 Perl 6 中，print 和有什么区别？ , put和 say ? 我怎么看 print 5不同，但 put 5和 say 5看起来一样。 最佳答案 put $a就像 print $a.Str
我正在使用 here 中的 getOrgChart 库，我正在尝试打印整个图表，而不仅仅是可见部分。不幸的是，当使用标准库打印功能时，它只会打印出第一部分，而我不知道如何打印整个图表(该图表相当宽，大
我制作了一个非常适合 A4 页面的 View 。现在我想打印它。请注意，我没有使用drawRect或类似的东西，只是一个带有 subview 和文本标签的普通 View 。我的问题是，我对该 View
由于 Cocoa-Java 已弃用，我正在将 Cocoa-Java 代码迁移到 Cocoa + JNI。该代码打印存储在文件中的图像。新的 Cocoa 代码基本上是: NSImage *image =
这个问题已经有答案了: Printing a TDBGrid (4 个回答) 已关闭 6 年前。 如何在不安装或下载组件的情况下打印 DBGrid？ 或者 如何将 DBGrid 的数据放入 RichE
我是一名优秀的程序员,十分优秀！