是否可以捕获或打印html画布中显示的图像或pdf?

我希望通过画布生成图像,并能够从该图像生成png。


当前回答

您可以使用jspdf将画布捕获为图像或pdf,如下所示:

var imgData = canvas.toDataURL('image/png');              
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');

更多信息:https://github.com/MrRio/jsPDF

其他回答

我想我会把这个问题的范围扩大一点,在这个问题上提供一些有用的花絮。

为了将画布作为图像,您应该执行以下操作:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png");

您可以使用此选项将图像写入页面:

document.write('<img src="'+image+'"/>');

其中“image/png”是mime类型(png是唯一必须支持的类型)。如果您想要一个受支持类型的数组,可以按照以下方式进行操作:

var imageMimes = ['image/png', 'image/bmp', 'image/gif', 'image/jpeg', 'image/tiff']; //Extend as necessary 
var acceptedMimes = new Array();
for(i = 0; i < imageMimes.length; i++) {
    if(canvas.toDataURL(imageMimes[i]).search(imageMimes[i])>=0) {
        acceptedMimes[acceptedMimes.length] = imageMimes[i];
    }
}

您只需要在每个页面上运行一次,它在页面的生命周期中永远不会改变。

如果希望让用户在保存文件时下载文件,可以执行以下操作:

var canvas = document.getElementById("mycanvas");
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); //Convert image to 'octet-stream' (Just a download, really)
window.location.href = image;

如果您将其用于不同的mime类型,请确保更改image/png的两个实例,但不要更改image/octet流。还值得一提的是,如果在渲染画布时使用任何跨域资源,则在尝试使用toDataUrl方法时会遇到安全错误。

如果您通过服务器进行下载(这样您可以命名/转换/后处理等文件),这里有一些帮助:

-使用toDataURL发布数据

-设置标题

$filename = "test.jpg"; //or png
header('Content-Description: File Transfer');
if($msie = !strstr($_SERVER["HTTP_USER_AGENT"],"MSIE")==false)      
  header("Content-type: application/force-download");else       
  header("Content-type: application/octet-stream"); 
header("Content-Disposition: attachment; filename=\"$filename\"");   
header("Content-Transfer-Encoding: binary"); 
header("Expires: 0"); header("Cache-Control: must-revalidate"); 
header("Pragma: public");

-创建图像

$data = $_POST['data'];
$img = imagecreatefromstring(base64_decode(substr($data,strpos($data,',')+1)));

-将图像导出为JPEG

$width = imagesx($img);
$height = imagesy($img);
$output = imagecreatetruecolor($width, $height);
$white = imagecolorallocate($output,  255, 255, 255);
imagefilledrectangle($output, 0, 0, $width, $height, $white);
imagecopy($output, $img, 0, 0, 0, 0, $width, $height);
imagejpeg($output);
exit();

-或透明PNG

imagesavealpha($img, true);
imagepng($img);
die($img);

在某些版本的Chrome上,您可以:

使用绘制图像函数ctx.drawImage(image1,0,0,w,h);在画布上单击鼠标右键

您可以使用jspdf将画布捕获为图像或pdf,如下所示:

var imgData = canvas.toDataURL('image/png');              
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');

更多信息:https://github.com/MrRio/jsPDF

如果您正在使用jQuery(很多人都这么做),那么您可以这样实现接受的答案:

var canvas = $("#mycanvas")[0];
var img = canvas.toDataURL("image/png");

$("#elememt-to-write-to").html('<img src="'+img+'"/>');