如何使用js截取屏幕截图并上传图片？

Question

我想知道是否有人知道如何制作我自己的“网页截图接收者”

功能将是

• 选择整页
• 选择可视区域
• 选择要采取的区域
• 选择后，通过我的PHP脚本上传并保存直接链接到剪贴板

有没有关于这样做的教程/有用的文章？我怎么能将图像“发布”到我的脚本？通过ajax？我认为这是不可能的

我会使用任何现有的扩展，但问题是它们都非常复杂。

更新：

现在它的工作原理，也发送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==

我的形象（保存）是here

我现在能做什么？

Answer 1

除非在扩展名（drawWindow）内，否则JavaScript无法截取屏幕截图。但是，如果您正在寻找类似于Google Feedback工具的东西，它不会截取屏幕截图，而是根据DOM构建模仿页面的图像，那么this experimental project可能会引起您的兴趣。使用here的脚本的一些示例。

另一种选择是使用服务器为您截取屏幕截图，但它不是用户看到的，而是服务器看到的内容，可能是也可能不是您所使用的内容（使用PHP，请参阅imagegrabscreen和imagegrabwindow ）。

对于Chrome扩展程序，Google有一个open source extension，可让您选择一个区域或整个页面进行截屏。通过一些修改，您可以使用AJAX将屏幕截图上传到您的服务器。

Answer 2

Chrome扩展API只允许taking screenshot显示当前标签的可见区域，就是这样。如果您需要更多（整页或非活动选项卡），您需要创建一个NPAPI插件（C ++ DLL）。

获得屏幕截图（以DataURI（base64）格式编码）后，您可以将其写入<canvas>元素进行编辑。你可以调整它，裁剪和任何你喜欢的东西（你可以完全控制每个像素）。

编辑完成后，您可以再次将屏幕截图从<canvas>导入DataURI，并通过ajax（POST或GET）将其发送到您的php脚本。扩展允许制作cross domain ajax requests。

Answer 3

我最喜欢的Chrome Awesome Screenshot屏幕截图和操作扩展程序。

Answer 4

不完全正确：你如何解释谷歌在谷歌网站上截取bug报告截图的能力？转到谷歌地图（例如）并选择页面底部的反馈。它需要截图并将其发送到谷歌。这不是延伸。