Javascript 我如何拍摄截图&；用js上传图片？

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

功能将是

• 选择整个页面
• 选择可视区域
• 选择要拍摄的区域
• 选择后，通过我的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`

在目标机器上，它输出除数据以外的所有内容

 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
                                )

                        )

                )

我的图像（已保存）是

---

我现在能做什么？

JavaScript不能截屏，除非它在扩展（）中。但是，如果您希望执行类似于该工具的操作，该工具不截图，而是基于DOM构建一个模仿页面的图像，那么您可能会感兴趣。正在使用的脚本的一些示例

另一种选择是使用服务器为您拍摄屏幕截图，但这不是用户看到的，而是服务器看到的，这可能是您想要的，也可能不是您想要的（使用PHP，请参见和）

---

对于Chrome扩展，Google有一个允许您选择一个区域或整个页面进行屏幕捕获的浏览器。只需稍加修改，就可以使用AJAX将屏幕截图上传到服务器。

JavaScript无法截图，除非它位于扩展（）内。但是，如果您希望执行类似于该工具的操作，该工具不截图，而是基于DOM构建一个模仿页面的图像，那么您可能会感兴趣。正在使用的脚本的一些示例

另一种选择是使用服务器为您拍摄屏幕截图，但这不是用户看到的，而是服务器看到的，这可能是您想要的，也可能不是您想要的（使用PHP，请参见和）

---

对于Chrome扩展，Google有一个允许您选择一个区域或整个页面进行屏幕捕获的浏览器。只需稍加修改，您就可以使用AJAX将屏幕截图上传到服务器。

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

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

Chrome扩展API只允许当前选项卡的可见区域，就是它。如果需要更多（整页或非活动选项卡），则需要创建一个NPAPI插件（C++dll）

一旦您获得了屏幕截图（in是以（base64）格式编码的），您就可以将其写入

元素中进行编辑。您可以调整大小、裁剪和任何您喜欢的内容（您可以完全控制每个像素）

---

编辑后，您可以再次将屏幕截图从

导入DataURI，并通过ajax（POST或GET）将其发送到php脚本。允许进行扩展。

Chrome扩展API只允许当前选项卡的可见区域，就是它。如果需要更多（整页或非活动选项卡），则需要创建一个NPAPI插件（C++dll）

一旦您获得了屏幕截图（in是以（base64）格式编码的），您就可以将其写入

元素中进行编辑。您可以调整大小、裁剪和任何您喜欢的内容（您可以完全控制每个像素）

---

---

编辑后，您可以再次将屏幕截图从

导入DataURI，并通过ajax（POST或GET）将其发送到php脚本。允许进行扩展。

不完全正确：您如何解释谷歌能够在谷歌网站上截图查看错误报告？转到谷歌地图（例如）并选择页面底部的反馈。它将截图发送给谷歌。这不是扩展。

不完全正确：你如何解释谷歌在谷歌网站上截图的能力？转到谷歌地图（例如）并选择页面底部的反馈。它将截图发送给谷歌。这不是扩展。

如果不使用JScript或其他东西为IE编写BHO，您就不能这样做。你可以使用Java.ok。谷歌浏览器？我是说。。作为扩展。添加到标记中你是在尝试自动化一些东西吗？我想您可以为特定浏览器使用插件/插件，但不幸的是，我不知道如何做到这一点：（至少不会比现在更多。：）你可以看看：你也可以在Chrome网上商店中查找可能有代码的应用，你可以查看它们是如何捕获屏幕截图的。例如，这个扩展似乎满足了您的要求：您不能（不使用JScript或其他东西为IE编写BHO）。你可以使用Java.ok。谷歌浏览器？我是说。。作为扩展。添加到标记中你是在尝试自动化一些东西吗？我想您可以为特定浏览器使用插件/插件，但不幸的是，我不知道如何做到这一点：（至少不会比现在更多。：）你可以看看：你也可以在Chrome网上商店中查找可能有代码的应用，你可以查看它们是如何捕获屏幕截图的。例如，这个扩展似乎满足了您的要求：不，我正在寻找js google chrome扩展来创建指定区域的屏幕截图。像这样，但要将其上传到我自己的主机，您可以查看大多数扩展的源代码。例如，这一个（由Google提供）允许您选择页面的一部分：在这之后将其发布到您的网站应该非常简单。请查看Google提供的这个开源扩展。@Niklas:谢谢。但是，我如何用ajax上传它呢？我认为ajax不支持POST@genesis这不是具有正确权限的扩展的问题。否。我正在寻找js谷歌浏览器扩展来创建指定区域的屏幕截图。像这样，但要将其上传到我自己的主机，您可以查看大多数扩展的源代码。对于ins

 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
                                )

                        )

                )

dataList%5B1%5D%5Bdata%5D:wolQTkcKGgoAAAANSUhEUgAAAEIAAABOCAYAAADClMKWw4DCkwAACMOJSURBVHhew61aW2wUVRjDvsKmNwpoacKXEsKiRsKwwqI0ATHChcK6wpJCBBR0McKKwrLClcO0woHCi8O7w4IDw7JgwqwJL8O1wr3CmsOUS8KCwqB9w4AHE8ODw4NKwqzCoD40w6kDCA1iQ8OiLU3CqsOIJkgkYFlawrDDnMK2w63DusKfMzM7c2bDjsOMwp4pU0rDjUwyw6l0w7bDjH/DucOOw7fDv8OnPxdtH8KQwp/Cm8OOIsKxAcO6wpXDqcOEw4HDhi48fsK6G8OxwroMOhPCjcOoSsKeRsO3wq46wqPCgcOtD8K1TTTCtsKhw4/DuUvCvB3Cp8K7d8Khwo7Dvz7CgD3DmcKPYMKKB3rDkBrDq0A9w4nDpyLCpW0MwoE9wq3CiHXDlMOrwrIKOsOYw7ctAMOZw7zCkSXDlMKyw4BDXsKmM8KBXcOodMO4YcO5wqfDtcKlwpDDv8Kuwr8dw5tJWcKMw4TDvcOZGsODd0jDo01DCxPDkMOYwrbChMO0w5rCncOxMcKUG8OSwoUkd1Q3wrrCv8OdAsKSw4vDq0paw47DuQHDgUETwr/DryHDu1rDiF4RHGfDpzjDgWd4wpPDnsKBPcOICsOoWcKgasOZw6zDqXwfw7XDuknCs1tTFgjCpnjCrsO8c0tZw5xwwozCvcOvwqh3wrLDhcOJIl1Zw6FzwpMtTBzDq3HCu8OgwoLCijjDmk3DhhhgSMK/d3PDlMKTYXIgLBsIwohsXibDj8O5TsOuwrTDisKXwpPDnMOGET7CvMOTwojDkWLDjzPDjMOlw69Nw6sUwoHDkHt5YMKPR1xOwrLCr8O w6J1w5vDmkxGw5sZZ8O7MCQgwqbDlMOTUMKUR0Aow4LCqBgaworDksKmccKzCAjCo8OzAgFhDsKjKcKvYmZaMyLCncOKw4daw7rDtXHCmyovwqsYEsK9w7ItwqzCpjEAAcKHw4/CqcOyw7Q6Dn7Dm8KHw4zCk2vDscOOwoI7wrHDgSjDqjzChlYmwplXwpbDgjjCjMKUUE47wqtKbg5Vwp/CvGDDscKaa8KYwr8rw5jDvsOXwq99w5jDusOTdcKhw6XDosKGOD5bNsKLw57ChQHChFXCpncSw6dlw5MFw6bCo8OWHkfCvm3CiVXCicK5w6YCwobCiWrClcKlY0LCpQrDhFAdwo4/UytpHQYQw4XCjcOgQFDDt8Omw4UJwpXCvMKKVAFCPsODI0PChDJYBMKLM8KiKBBxw5TDvcOSwodPwq8wwqdmw6HCjVfDosOYOsKnwrjCg2YLwpHDlRbDo8O1wrzCp8KXwqQaw5E8L8Krw4vCncKTwqnCokB4w44iRcOHwp0Vwp4KEAzCgMKNa8O1PCHCtBd0w4rClwzCmMKzex/Dqy5Mw5llwrNXwp0RwqEAw6E1FxHCjcKTwoXCnSxHwphOS3PDhMK5fjzDs8OLbBx8eSEeZl3DqcODNilnJGscw6EBIV1Aw5HDjRDCmMOEwqfDnWxNw4Vaw5tQYcKEMGo4woEgHcOCFMObwqlDwpbDkB3Co8KHDkTCvD3Cr8KyAsOkHRrDhRLDpMKdwofChi8Qwr7CjMKQwoTCixcjUsK0VGdfQcOyWgHDsgLDgjNBw5p5ecOHw4nDklZHw5gZw6HDiEtuG8Kdw4t6w7J6woLDuUB1RDrDr8K5woJkUMObwrXCiFTCrMKOwoB9woXDiT/Cu8KHERrCvhrChFUwwrIrwp1EVwfDkCnCrMKDZhgQaitUw6rCg8OVw7RsGQFhw7RbBEQEwoQYw4IRIyJGTDdGw5DDsMK3wpfCjcOfwpLCjcKnMMOHwqdpEho9w6jCpsOaw7wyw63CsG3ClcOtw4HChsKASMKoQGTCqULDu8KCTWsnwrnDt0LDsMObEmEww44HwogMw7jCnigtw5rCmBvDgsOmw5d8wqPDmMK2ccOMw57DqyAsw4FLNMKhWhTCosKlXMKXbcOfwpXCi8KeBMKgw70ZIRwRMMK8wpPCvQvDkXEvUQzCkFPCtMOhPMKJwqHDocOYDSdLw6ptw6cleE/DkzbCvn5sQGfDiR90XsOCMsOIYE7DocKQRCp0VjBww7zCgBBZI8ORbyZcA8OlWknCrsORw47CtMOHw7Nfw5DCuQEnw71tQcOEExU7wpjCkQDDi8OgwrA5w6oGRgQuPMKqeAHDgcO0w7XDkQrClHnDkMOFFcK2HMKEfjTDscKDL8Oew7bDqEAUwoltw53CuSXCqGfCpxxoR1w8XTPCgMKVQl5gGcK A8KxIsKKwoNCwqQcGsOMcTplYz/DuMKiElI8RxTCssK9ZyLDksKHwq8BWsOZMRVwRxxKdcOndMKWZE3DgHhOacODYMOBcxt1XcK/wpnCjcOcw7TDtgRCJsKjYMKnw4MWH8O0HcOJw5J/wqRwIcOLwo0IwpkRwpzDisO2w7DDk8KtwpcDIcOJWULDp8OIcsKaHA3Dl8Kow4HDmSHDiRnCqsKGw4jChsOWQGEQCAjCncKpPH/DscKDZW7DpsKqDsOrWjdtw7AUw45PMVlOw7obXnjDh8KowqHDnMO0w5bDo8O7QGDDmBoXwq0jwoQRIcKOJlrCgcO6woNWwqA2GsKHw6PCmCghw7TDqX/DqcKoEcKtUMOpwqjCh1piT8K0w5fDr8KFw68iIMKKw481w67ChX7Cuns2RMKMMMKwwo7CgMKIwoAQw4MuYkTDhMKIwogRw5LCoUjCu3nDs8Kmw5LDqcO8wrs3wpBNwo0mw63DrMOZwrPCvkDDpMOzw5bDj2VlZTh3w64cwr/Cr1zDoQfCmsKgaXQMw4t2wpnDrcKdw68nw5M9wrvCjcKmwp7CmsKaGixYwrDCgMOfKsKXRk4pM8KiwrTCtBRHwo8ew4VaOsOPVF1dDcKZASpKw69GG8OWUcOHwo8fw4fCunXDq8KUw5RpFy5cCMOEwohDwocOIcKVSmF8wpx9wpYnMEQ9U8ONCMKmf3x8woxxFV9 wplGMsKZVAPDosOiw4XCi8OcwpXDssOycsKwHh8bG0MuwpfCk37DjEIjwp1OY8OHwo7DlwnCgHFSOD4hVsKUwpTClMKiwqTCpMKEw6tgMsK8wp51wofCgl3CrMKDRkfDh0jCpsKGwq7CrsKvw5DDnMOcwqwkQGNAwpggw6zDnMK5EwcOHAAlUF8gwrZvw5/DgQFjTsKwO8OoVVFRwoEXNybCsHTDqVLCvMO/w4HCh8Kuw6dEIsKBwrdaw5/DhsOtw5vCt8KDworDpkwdIwBLCcKIw4PChw/CqwPDgcOWIxgTGhoaw5DDksOSwoLCtsK2NgUgwrYjR8Kowo8bYATCtXbDhsKMGXjCu8O1LcKsWcKzBsKbwpPDjcKuw6dNwps2w6HDmcOnw5bDo8OWwq1bQUVjwpxCwoN1UnlZaTAgwobCh8KHw7PDi8KWLcOjwr3Cs2XDixZ F2PDhMK2bQQEwoXCj8OJworCoMOWVlbDjsOAe8Ovwr7Ci8KmVcKreMOidT7Cv0DCjFjCsWIFw5kxASAMwpbClsKXwpfDocOIwpEjw6rCjCAQw7LClcKVwpXDmMKwYQPDosOxOMOWwq9fXxTCiMOmw6bDl3DDo8OGDcKibsKOw6JxNCgOwqjCqsK6H8O7PsOew4vCgWhsfMOKw7XDjMKAWMK8wrgeV8KvXgsswpvChWrCjmzCmjXCqxLDnx87wqYOBGPDhMOuw53Cu8KxfMO5csOOwopVZFwxRiTCicOOIyPDl3kMw6dyw4HCgcKYM8KnCsKffsKywo8Dw5HDkMKww4LDtcOMwoBYwrTDqHEMD1/CnRAQwqPCoznDjMKePRsnTnzCrw7ChMKZI8O2w6/Dn8KPwqbCpibCg8KSw77DiXLDs8OmJMKuXcO7wpdiwpgBIR9hw7w8wqjCrsKewoNvwo58wo0nKCTDq8OqFsK5wp7Cn17CuRLDs8OnP8KAwqHCocOhw4BAwowRI8OGwogRVVXDt8KhwrfDt8KEOhDDtlHCo8K3wrcXwqtXwq8uw4rCiFdfw51Mwr11wo3Ct8KbCBDCsVgNfsO7w7VnPMO4w5BDwojDhWpdw491wo8 Sj16P8KyWcK9eg1ywrHDkGDDocOKw4A ecKyNxgQQcOrwojCl17DnsKEw4F/LlPCnsK4w4nDq8KJwqAXwqPDrcOMwpkzw7lnLMOXeD3Cj8KMwowEFcKtD8KfNGrDjMKtwq3DgcKpH04GB0JFwqNZUD3Dv3wCw6fDj8O/w40rODZcw50zF8KZw4IqS3bDj8KfX8KLH388wqUOw4TDoMOgYMKgEsK7wqfCpwcLFz7CgsKKwopKwo7DvEQYcTfCgGPCicO8w4zCmcOfw4FqEsKVK8OQChUrwoUzwpkMwr/Ch8KGwoZUw6RPWRtWwr3DjsKbNw8rKcOxwqpcw5rCpUvCl8OuIW7Cq8KYHMK8wo3DiixZwqNGw797IFTCoMKLwoAwUMKKwoDCiMKAEAMmYkTDhMKIwogRw5JBJArCjSg0wqLDkMKIQsODwq/DgsKMcsKEwoHDjn8vwp3CncOReT3CmRgAAAAASUVORMKuQmDCgg==