我有一个带有一些图像的常规HTML页面(只是常规的<img />HTML标签).我想得到他们的内容,优选base64编码,而不需要重新下载图像(即它已经被浏览器加载,所以现在我想要内容).
我很想用Greasemonkey和Firefox实现这一目标.
我正在尝试使用div将div捕获到图像中 html2canvas
我在这里读过类似的问题
我试过了代码
canvasRecord = $('#div').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
并且canvasRecord将undefined在.html2canvas()被召唤之后
还有这个
$('#div').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
浏览器给出一些(确切地说是48个)类似的错误,例如:
GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&callback=html2canvas_1 404 (Not Found)
顺便说一句,我正在使用v0.34,我已经添加了参考文件html2canvas.min.js和jquery.plugin.html2canvas.js
如何转换div为canvas以捕获图像.
编辑于2013年3月26日
我发现乔尔的榜样有效.
但遗憾的是,当谷歌地图嵌入我的应用程序时,会出现错误.
<html>
<head>
<style type="text/css">
div#testdiv
{
height:200px;
width:200px;
background:#222;
}
div#map_canvas
{
height: 500px;
width: 800px;
position: absolute !important;
left: 500px;
top: 0;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script> …我正在尝试使用http://html2canvas.hertzen.com/来截取我的网页截图.我无法使用...初始化canvas元素
var canvas = $('body').html2canvas();
如果我能够得到一个合适的画布,我会跟着类似的东西
var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl); // display image
不幸的是,IMO的文件非常有限.http://html2canvas.hertzen.com/documentation.html.我不相信我需要预加载,因为我没有使用任何动态图形(但我甚至没有那么远)
如果这个人在使用html2canvas进行屏幕捕获方面取得了成功,那我就太了解了
我似乎没有比这个家伙更远. 如何使用html2canvas上传截图？
我理想的解决方案将演示如何使用最少的代码创建屏幕截图 (将html复制到画布.获取toDataURL字符串.输出字符串)
任何见解都非常感激=)
使用HTML5的File API,上传是通过upload在XMLHttpRequest.中调用的对象进行的.这是我正在使用的教程(以及Google缓存镜像,因为它现在已经关闭).这是相关部分:
// Uploading - for Firefox, Google Chrome and Safari
xhr = new XMLHttpRequest();
// Update progress bar
xhr.upload.addEventListener("progress", function (evt) {
如您所见,为了跟踪上传进度,该XMLHttpRequest对象有一个名为的属性upload,我们可以添加一个事件处理程序.
我的问题是:jQuery是一个等价的吗？.我试图让代码尽可能干净,并且尽可能地跨浏览器兼容,因为每当微软认为这是一个好主意时(尽管听起来会像2012年或2013年那样).
我需要能够将图像和一些表单字段从客户端canvas元素发送到PHP脚本,最后是$ _POST和$ _FILES.当我这样发送时:
<script type="text/javascript">
var img = canvas.toDataURL("image/png");
...
ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str);
var request_body = boundary + '\n'
+ 'Content-Disposition: form-data; name="formfield"' + '\n'
+ '\n'
+ formfield + '\n'
+ '\n'
+ boundary + '\n'
+ 'Content-Disposition: form-data; name="async-upload"; filename="'
+ "ajax_test64_2.png" + '"' + '\n'
+ 'Content-Type: image/png' + '\n'
+ '\n'
+ img
+ '\n'
+ boundary;
ajax.send(request_body);
</script>
$ _POST和$ _FILES都回填了,但$ _FILES中的图像数据仍然需要解码如下:
$loc = $_FILES['async-upload']['tmp_name'];
$file = fopen($loc, 'rb');
$contents = fread($file, filesize($loc)); …我正在尝试使用Javascript上传png到imgur.我直接使用了Imgur API 示例中的代码,但我不认为我正在传递png文件,因为我收到一条错误消息file.type is undefined.我认为该文件没问题,因为我尝试了几个不同的png.我的代码如下:
<html>
<head>
<script type="text/javascript">
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "mykey"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr …我试图让我的网站上的用户按下一个按钮来截取当前屏幕的截图(一切都在正文中).
根据我的研究,html2canvas似乎是一种可以实现这一目标的资源.
我的问题是文档没有提供示例代码,我正在努力控制所涉及的步骤.
http://html2canvas.hertzen.com/documentation.html
以下SO问题(如何使用html2canvas上传截图？)让我有点困惑.我只是想知道如何在这一点上获得一个图像.
从他的代码.
$(window).ready(function(){
('body').html2canvas();
var canvasRecord = new html2canvas(document.body).canvas;
//At this point does the .toDataURL method return a png?
});
在这一点上,我迷失在图像的位置,甚至是如何/何时创建它.我担心以后会把它发送到服务器.
任何信息赞赏.谢谢!(甚至需要html2canvas？)
我下载了html2canvas javascript插件,它允许我在客户端(浏览器)截取网页的截图,但我无法弄清楚我应该在页面的标题中包含哪些文件来使用它,我已经看过如何使用它的示例,但我应该包含哪些文件？
javascript ×7
html2canvas ×4
html ×3
screenshot ×3
ajax ×2
base64 ×2
image ×2
canvas ×1
firefox ×1
greasemonkey ×1
html5 ×1
imgur ×1
jquery ×1
php ×1
png ×1
upload ×1