是否可以捕获或打印html画布中显示的图像或pdf?
我希望通过画布生成图像,并能够从该图像生成png。
是否可以捕获或打印html画布中显示的图像或pdf?
我希望通过画布生成图像,并能够从该图像生成png。
当前回答
我想我会把这个问题的范围扩大一点,在这个问题上提供一些有用的花絮。
为了将画布作为图像,您应该执行以下操作:
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);
我想我会把这个问题的范围扩大一点,在这个问题上提供一些有用的花絮。
为了将画布作为图像,您应该执行以下操作:
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方法时会遇到安全错误。
在某些版本的Chrome上,您可以:
使用绘制图像函数ctx.drawImage(image1,0,0,w,h);在画布上单击鼠标右键
function exportCanvasAsPNG(id, fileName) {
var canvasElement = document.getElementById(id);
var MIME_TYPE = "image/png";
var imgURL = canvasElement.toDataURL(MIME_TYPE);
var dlLink = document.createElement('a');
dlLink.download = fileName;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
HTML5提供Canvas.toDataURL(mimetype),它在Opera、Firefox和Safari4测试版中实现。然而,有许多安全限制(主要是与将内容从另一个来源绘制到画布上有关)。
因此,您不需要额外的库。
e.g.
<canvas id=canvas width=200 height=200></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(50, 50, 100, 100);
// no argument defaults to image/png; image/jpeg, etc also work on some
// implementations -- image/png is the only one that must be supported per spec.
window.location = canvas.toDataURL("image/png");
}
</script>
理论上,这应该创建一个中间有绿色方块的图像,然后导航到该图像,但我还没有进行测试。