我怎样才能截图&用js上传图片?
我想知道是否有人知道我如何制作自己的“网页屏幕截图获取器”
功能将
- 选择整个页面
- 选择可视区域
- 选择选择后要拍摄的区域
- ,通过我的php脚本上传它&将直接链接保存到剪贴板
是否有任何关于执行此操作的教程/有用的文章?我如何将图像“发布”到我的脚本中?通过阿贾克斯?我认为我不可能
使用任何现有的扩展,但问题是它们都太复杂了。
更新:
现在它可以工作了,发送ajax也可以工作,但在我的服务器上我看不到发送的二进制数据。
如果我打开 Chrome 并查看发送的表单数据,我会看到,
boundary:Google_Chrome_Screen_Capture
dataList%5B0%5D%5BcontentType%5D:application/atom xml
dataList%5B0%5D%5Bdata%5D:<entry xmlns="http://www.w3.org/2005/Atom"><title>1312107206756.png</title><summary></summary><category scheme="http://schemas.google.com/g/2005#kind" term="http://schemas.google.com/photos/2007#photo"/></entry>
dataList%5B1%5D%5BcontentType%5D:image/png
dataList%5B1%5D%5Bdata%5D:PNG
IHDR³¾~>-IDATx^íMnK¯P5²ôjPBÍ,
XO5 ±`èyÈYsDI63,FÈ]fFz[\Ý=j©:~22##* ý9÷0²ÉÌ8ç|qãfzíßÿýßBø8°FR¤ça&0f()03LBÉ&J
Yûç¿þÃïÌäµù¡"Ô;@Õ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8f,Õ !ÌêÀ10ãd©^ aV'KõJ³zp Ì8YªWBÕ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8f,Õ !ÌêÀ10ãd©^ aV'KõJ³zp Ì8YªWBÕ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8f,Õ !ÌêÀ10ãd©^ aV'KõJ³zp Ì8YªWBÕ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8f,Õ !ÌêÀ10ãd©^ aV'KõJ³zp Ì8YªWBÕ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8f,Õ !ÌêÀ10ãd©^ aV'KõJ³zp Ì8YªWBÕ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8f,Õ !ÌêÀ10ãd©^ aV'KõJ³zp Ì8YªWBÕ#caÆÉR½Â¬3Nêfõà@q²T¯0«GÇÂ¥z%Y=8èyz ¯ßýÏåÑú5ys]³ßaøKÂ|.ööE®Fg®ÎÊéÁk_Ê㫳m¼ækÖ72Û¶ëøµ~\·cu0_µíý6a¾êìx̾:È߲骹rþI|Ñ}$ëî¸üÍÿ@½üS|a«h";òÂ>c31#újØòLåàõ;ñ3eóÄëHç¦9ìñXw|[áîÉv¾þlqÙ÷7'2Édëͼ¨Õbf±Þ¬õë×lÕA§ÓÏçÎû$9òð©È~ü|e¼ëÀá÷ÓÃÙÉþùcynIðûyfÊ8àüÓ¼mËKO|Þf¬½ÃþYÒ¡l¾´DÓ3|»7ÌÆË4ner¸×å¨upÛådc¥ì²gϵû¹Í¦lÕâ×üîG¼3ø*ÚLqð¦Á^¼t§9- ûòÔ»w.M³=9l{áÌÒEEûäº9íaC4=ß*«ßãiXߺÙwÅÏå¢çïúÿà׶ùïqeNµUÛ{*<$ÌKáMoX-f¢ò*±-³}µ{á/µÙí/¸ÖâäþlHq6«Z¡; mCÓ3¢vĶ®åIª´ º5sTZ¨hj3éõZìüaÓû9ja®ÙÅ&hð0¯óÑ?'Yoì¸Ý£Ù¦üØÈÚtÈüø· ÀÅÕ3ô«¦¹.úï¶gv¦ÜªdÏlßb¾£k.µQ[z¾e^÷UÜ ³ý"Tò0¯ó«W¯wB¯WásâeÛJðFý§«ÚéË\ö.}ÑrÁ1qmz]ÏìO׫Oþ|µaÇsD=s¸÷Å®Z[çÉNyæß!â{{ôÌÖcoÊí׿½|¯5ük½úkëäZCdýyøbÑpç÷Fߣ72øÜmoï¡ U±ækF©zF,¼:;ð£/#¾f´´a#ÕÍSþµ`µmùÚc?ïtô#öðÎiå&3ÿ"ÎÁÚYýÎl:ZçWõWøz@·Å̾ÉÍü©÷¶8ÀuÀ8pÉ¿Âø@!f)Á;@I&J
!ÌdÆÂ%f2ãaB3q0ÃDI!À8@a¢¤ÂL` Ì0QRa&0f()03LBÉ&J
!ÌdÆÂ%f2ãaBÖ¾|ù²
tÁµ?f$©A3!q0ÃDI!À8@a¢¤ÂL` Ì0QRa&0f()03LBÉ&J
!ÌdÆÂ%f2ãaB3q0ÃDI!À8@a¢¤ÂL` Ì0QRa&0f()03LÒóüL>^ȽÝ-ùcú>·Êé½}çìûÜeÖzÏÆú~¾Éõ´åvY\=̿¾Fô}îWh¼ì`þðöÃb8ËtzaìÊøÉÜ|ã÷åÌ8OrWéÔã»Ï.{í}ÇfÁT¦~0=ܼÔGóGf¦¹·ìü!¹¹||{Ù3nÞ3¹5{¾ËûÓ¡<Ù96ëÌÍcõÓ¦s¢»öT²÷IÕ³lÍnÌ©X7WÓÛeî~¾ÜÛÉYMÍ~E;§IÏÒl;¸j*,Kç)|[ûðöíâl8';we`áø,>ì¶\¹6A´æÙ!²céðÙ¹ïåt]û<Ï6SaÄüÛDeË=oþh6]Øùµ?¾;:Ïc7]Cb`¼7×Å=Ù-v^¶¨Ì¼:ÏÄ^;aØl-ã;/"½ÝæîãKÖ*®K1Kò&Ï»Q³¾øZ2OìÙÐUK[ M)µÕQ¢9Ý5 õÝ¥q|åÕ/;¯ÌFU¶3·|óãÌ`wkP¿VkDë<Q@±ÆD÷{¼¾à°¹Ö³xÝîöx6½ 4s'ÕÎEÕѮŠU~4´1Ñg¶ÊÜÔ$y%ɪåÙÈÀ=¸f#H=
0çÁÚ£Ò¶¡åÉ~OOæI
ÖÍZ«Fh»âtRðü ã<ËÚ'ûûç¬ÝqmZXc_Uo×¹ÓuØÍÖÑKÀܨ§²*ÍKÇè
sYó-¬Ìac}~1PG¡BZ«DZÛ*s]%NIa7aRµ;DM§@kó¨«/½`nÑÓ¹2w£7ÌEf¾g=ô½aÜÓV(zAß»ª½õ²ª¸BYÑõö¥Ë÷×iïÜsMoÞ¡gNûûrhªÁRÏB»S¼°¶½#T®5¶ñ¼/}`®6ÓSjÑÒÖ.i*¼f^0³uÙæ @ü5#û]jÉAöòe¯ÇcرUøÊ£ãu4ñÜÍ¥¯)î¹ä FxQM7PÝ異ë׺#ôÁ§¶{¨ñÌþ%Õýs_h¦ð5&^GEoÜjDs7ëìêÿ2äòlû:lF=qZëy1P§1zÂìßK|«QéÛ¶k¼ÚÚ5N»úÐÕyõ1Z*YÍ`ßm³½â¯z-ê÷~èÂ*E0°©Þ6ûÂÜW¯yîÛ\îÞ]éï°·Í´YÏÿÈ>ãÝbIEND®B`
但是当我
print_r($_POST);
在目标计算机上尝试时,它会输出除数据之外的所有内容,
Array
(
[boundary] => Google_Chrome_Screen_Capture
[dataList] => Array
(
[0] => Array
(
[contentType] => application/atom+xml
[data] => <entry xmlns="http://www.w3.org/2005/Atom"><title>1312107206756.png</title><summary></summary><category scheme="http://schemas.google.com/g/2005#kind" term="http://schemas.google.com/photos/2007#photo"/></entry>
)
[1] => Array
(
[contentType] => image/png
)
)
)
这是服务器配置还是扩展错误?
UPDATE2:
作为 serg建议,我已经以 Base64 代码编码发送了我的图像。它有效,我将图像保存在我的服务器上,但是它只发送空白图像
base64数据,如下所示:
dataList%5B1%5D%5Bdata%5D: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 Sj16P8KyWcK9eg1ywrHDkGDDocOKw4A ecKyNxgQQcOrwojCl17DnsKEw4F/LlPCnsK4w4nDq8KJwqAXwqPDrcOMwpkzw7lnLMOXeD3Cj8KMwowEFcKtD8KfNGrDjMKtwq3DgcKpH04GB0JFwqNZUD3Dv3wCw6fDj8O/w40rODZcw50zF8KZw4IqS3bDj8KfX8KLH388wqUOw4TDoMOgYMKgEsK7wqfCpwcLFz7CgsKKwopKwo7DvEQYcTfCgGPCicO8w4zCmcOfw4FqEsKVK8OQChUrwoUzwpkMwr/Ch8KGwoZUw6RPWRtWwr3DjsKbNw8rKcOxwqpcw5rCpUvCl8OuIW7Cq8KYHMK8wo3DiixZwqNGw797IFTCoMKLwoAwUMKKwoDCiMKAEAMmYkTDhMKIwogRw5JBJArCjSg0wqLDkMKIQsODwq/DgsKMcsKEwoHDjn8vwp3CncOReT3CmRgAAAAASUVORMKuQmDCgg==
并且我的图像(已保存)是 这里
我现在能做什么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
JavaScript 无法截取屏幕截图,除非它位于扩展程序中 (drawWindow) 。不过,如果您希望执行类似于 Google 反馈 工具,它不会截图,而是根据 DOM 构建一个模仿页面的图像,然后这个实验项目< /a> 可能感兴趣 你。 此处使用了一些脚本示例。
另一种选择是使用服务器为您截取屏幕截图,但这不是用户看到的内容,而是服务器看到的内容,这可能是也可能不是您想要的内容(对于 PHP,请参阅 imagegrabscreen 和 imagegrabwindow)。
对于 Chrome 扩展程序,Google 有一个开源扩展程序,可让您选择用于屏幕捕获的区域或整个页面。只需稍作修改,您就可以使用 AJAX 将屏幕截图上传到您的服务器。
JavaScript cannot take screenshots unless it is within an extension (drawWindow). However, if you are looking to do something similar to the Google Feedback tool, which does not take a screenshot, but builds an image mimicking the page based on the DOM, then this experimental project may be of interest to you. Some examples of the script in use here.
Another option is to use a server to take the screenshot for you, but then it isn't what the user sees, but what the server sees, and that may or may not be what you are after (with PHP, see imagegrabscreen and imagegrabwindow).
For Chrome extensions, Google has an open source extension which allows you to select a region or the whole page for screen capture. With a little modification, you could make it upload the screenshot to your server with AJAX.
Chrome 扩展程序 API 允许仅对可见区域截取屏幕截图当前选项卡的,就是这样。如果您需要更多(整个页面或非活动选项卡),您将需要创建一个 NPAPI 插件(C++ dll)。
获得屏幕截图后(以 DataURI (base64) 格式编码),您可以将其写入用于编辑的
元素。您可以调整其大小、裁剪以及任何您喜欢的内容(您可以完全控制每个像素)。
编辑后,您可以再次将屏幕截图从
导入到 DataURI 并通过 ajax(POST 或 GET)将其发送到您的 php 脚本。扩展程序可以发出跨域 Ajax 请求。
Chrome extension API allows taking screenshot only of a visible area of a current tab, that's it. If you need more (whole page or inactive tab) you would need to create a NPAPI plugin (C++ dll).
Once you got the screenshot (in is encoded in DataURI (base64) format) you can write it into
<canvas>
element for editing. You can resize it, crop, and anything you like (you have full control over each pixel).After editing you can again import the screenshot from
<canvas>
to DataURI and send it via ajax (POST or GET) to your php script. Extensions are allowed to make cross domain ajax requests.我最喜欢的 Chrome 屏幕截图和操作扩展程序很棒的屏幕截图。
My favorite screenshot taking and manipulation extension for Chrome Awesome Screenshot.
不完全正确:您如何解释谷歌为谷歌网站中的错误报告截取屏幕截图的能力?转到谷歌地图(例如)并选择页面底部的反馈。它会截取屏幕截图并将其发送给谷歌。这不是扩展。
Not entirely true: how do you explain google ability to take screenshots for bug reports in google websites? go to google maps (for example) and select FEEDBACK at the bottom of the page. It takes a screenshot and sends it to google. And that's no extension.