截图完成后如何复制到想用的页面？_育儿问答_宝宝树
截图完成后如何复制到想用的页面？
当时年龄：
来自：网页;
可以先保存，或者直接粘贴也可以'…
其实，宝妈你也可以，这些知识里面都有哦！
最佳回答者：
点击右键—图片另存为—、文档、图库、图片任一一个位置即可了。怎么才做出类似这两张图片的格式的图，是要先截图然后把图粘到一起吗？
&img src=&/c1de8b67be71b6a7b0a6fa_b.png& data-rawwidth=&984& data-rawheight=&770& class=&origin_image zh-lightbox-thumb& width=&984& data-original=&/c1de8b67be71b6a7b0a6fa_r.png&&&img src=&/fe39173aafb7a11eecad897_b.png& data-rawwidth=&600& data-rawheight=&471& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/fe39173aafb7a11eecad897_r.png&&
已有帐号？
无法登录？
社交帐号登录您的举报已经提交成功，我们将尽快处理，谢谢！
你先按ctrl+c在看看有没有粘贴的选项，你看不到粘贴是因为你没有复制东西到你的剪贴板里面，如果复制了，你右击的时候就可以看到粘贴选项的了。这两个命令是配对的。
大家还关注
(window.slotbydup=window.slotbydup || []).push({
id: '2081942',
container: s,
size: '1000,60',
display: 'inlay-fix'知乎回答问题编辑框用 Ctrl+V 粘贴图片是如何实现的？
貌似我没有像QQ邮箱之类的装知乎的插件是用HTML5的新功能实现的吗？看了@朱利安 的回答，发现我描述的不够清楚我是用QQ截图之类的工具截的图，然后图片本身是保存在剪切板里的，剪切板中保存的*不是*图片的地址大家可以自己试一下，用QQ截张图，然后在下面的编辑框里 Ctrl+V 一下
按投票排序
呵呵，刚发现知乎编辑器有这么强的功能，赶紧研究一下，记录如下抓包截个图，然后粘贴到编辑器，查看 HTTP 包，发现有对 的请求request 的格式是multipart/form- 图片的内容作为request body 的一部分一起传了过去这里大概就能推测出基本原理了：监听粘贴 → 获取粘贴内容 → 将内容上传搜索代码在 rich_text_editor.js 里面搜索 /upload 字样，搜到了这么一段this.Vz = "http://upload." + Ak.Sl + ":" + location.port + "/upload";
估计是设置属性，那么再搜 .Vz 看看哪里用到了，于是看到function zE(a, b) {
var c = new FormData;
c.append("via", "xhr2");
c.append("upload_file", b);
d = $.ajaxSettings.xhr();
d.withCredentials = i;
var f = $.ajax({url: a.Vz,data: c,processData: l,contentType: l,xhr: function() {
},type: "POST"}).done(function(a) {
啊，找到了，这里应该就是发送图片数据的地方，而且用了 FormData 这个 HTML5 特性简单说就是 ajax 以前只能向服务器发送文本，而 HTML5 提供的 XMLHttpRequest Level2 现在支持发送二进制数据了，这里的 c.append("upload_file", b) 里面 b 应该就是那个图片的二进制数据打断点继续追踪就容易多了，只要在这个地方打个断点，然后往编辑器里面粘贴一个截图Chrome 调试工具的 Call Stack 就会告诉你，程序的上一步在哪里看一看 a 对象的属性基本可以断定它是一个 Event 对象，而且这里的这段 function 就是对粘贴事件的处理，为了验证，搜索一下 .rw 就会看到这样一段 看一看 a 对象的属性基本可以断定它是一个 Event 对象，而且这里的这段 function 就是对粘贴事件的处理，为了验证，搜索一下 .rw 就会看到这样一段 a.f().addEventListener("paste", u(this.rw, this));
确定推断无误，可以看到上面的处理函数中，通过 a.clipboardData 就能取到剪贴板中的数据，并且可以通过 clipboardData.types 来判断数据是不是图片。这么高级的 API 是哪里来的呢？搜一下就知道了 可以看到这个 API 属于 W3C 的标准（当然还是草案阶段），但是不属于 HTML5 另外代码中的重点是这么一段c.type.indexOf("image") && (zE(b, c.getAsFile()), a.preventDefault())
zE 就是上面的那个 ajax 发送函数，而通过 c.getAsFile() 可以从剪贴板中获取二进制的数据结论通过 Clipboard API 可以在用户粘贴时获知粘贴的内容，包括内容的格式（是否为图片），内容的二进制数据等等通过 XMLHttpRequest Level2 可以实现将二进制数据以 ajax 的方式发送到服务器，即实现了上传功能当然以上都需要浏览器的支持，估计IE下就悲剧了最后，我现在迫切期待新浪微博的发布框能支持这个功能
这个和 HTML5 没有太大关系，网页浏览器很早就有这个标准了，不同浏览器下的实现接口略有区别。粘贴（包括富文本、图片等各种格式的内容）是利用了 contentEditable div 的 onPaste 事件。知乎的 JavaScript 源代码经过了混淆和压缩，非人类可阅读的，所以我就不扒他的代码了。当在编辑器上执行粘贴的时候，onPaste 事件被触发，同时有一个事件参数 event，包含 clipboardData
的属性。简单来说，代码逻辑可能是这样的：function onPasteEvent (e)
if (e && e.clipboardData && e.clipboardData.getData)
if (/image/.test(e.clipboardData.types))
//粘贴图片
var imageContent = e.clipboardData.getData('image/xxxx');
//检测图片来源
//如果是最原始的 data，比如 QQ 截图、Word 里复制所产生，直接把 data 上传
//这一部分可能用了是 HTML5 中 HTTP_CONTENT_DISPOSITION 上传机制
//除了 HTML5，非显式的 input[type="file"] 应该是无法上传文件的
//如果是 file，上传到知乎服务器
//如果是外部网站 URL，后台 curl get 转移到知乎服务器
//最后生成一个知乎的 URL，作为 img 标签插入到 contentEditable div 中
else if (/text\/plain/.test(e.clipboardData.types)) {
//粘贴简单文本 ....
if (e.preventDefault)
e.stopPropagation();
e.preventDefault();
return false;
在 的启发下，继续挖掘了一下。收获如下：在IE和Firefox下，利用html5全局属性 contenteditable 来实现根据uri粘贴一幅图像。在Chrome下，利用特有的 clipboardData.items接口 和 getAsFile方法实现增强的粘贴图像功能（其实是从剪贴板上传的功能）。细说如下：一个HTML5全局属性: contenteditable 使相应元素在页面呈现 可编辑/不可编辑 状态see &div contenteditable="true"&&/div&一个推测（尚未严格验证，请知者指教）: 复制一幅图片到系统粘贴板中 会有以下内容在剪贴板中生成(可能缺少某些项):来源(类似 src )，标题(类似title)，内容（可以是二进制的）根据这三项的有无和可访问性，我们考虑以下三种剪贴板图像（获取方式下详）：type 1. public_uri/local_img(hvae src, title, )type 2. private_uri(have src, title, local can not )type 3. print_screen( no src, )对于前面提到的&div contenteditable="true"&&/div& 元素而言：不同浏览器会以不同的行为响应onpaste事件。试验之。代码如下：&html&
&title&test contenteditable&/title&
&h2&test contenteditable&/h2&
&div contenteditable="true"&paste img here&/div&
将上面的代码存储为一个html文件，然后用不同的浏览器打开。分别用如下方式获取type1 type2 type3 三张图片：type 1. 在你的知乎头像上点击鼠标右键，复制图片；type 2. 用QQ截图，然后在截图上点击鼠标右键，复制；type 3. press PrtSc/SysRq；然后用Ctrl+V的方式将剪贴板内容粘贴到页面的DIV里面。看到如下现象：IE8:
type 1, 将一个 IMG标签写入DIV，并设置相应的属性，如 src, title。页面上会显示出这幅图像，真实数据是从src指定的uri读取的。
type 2, 同1,但是由于没有URI的访问权限，页面上会显示为一个无法显示的图像。
type 3, 由于没有 src， titile等内容，不会生成IMG元素，所以粘贴没有任何效果 (注意：这只是IE的行为，其他浏览器可能有不同的行为，下详) FireFox24:
type 1, 同IE
type 2, 同IE
type 3, 虽然没有src， title。但是有content在。firefox还是会生成一个IMG标签。
标签的title等属性为空，src属性为图片的数据内容，如
&img src="data:image/base64,iVBOR(略去n字符)ErkJggg==" /&Chrome31:
type 1, 同IE
type 2, 同IE
type 3, 同IE再来看一下知乎编辑框的粘贴情况，同样用上面三种粘贴板图像来测试：IE: 同上(1 ok, 2 not ok, 3 not ok, no response)FF: 同上(1 ok, 2 not ok, 3 ok, with data in src)Chrome:
type 1 (ok, with new url )!type 2 (ok, with new url )type 2 (ok, with new url )!! (图中是一张qq截图)
type 3 (ok, with new url )!!全都是new uri，并且是指向知乎的服务器的，说明图片已经从剪贴板上传到服务器上了。看来知乎的编辑框针对chrome 有特殊处理，或者说chrome提供了对粘贴板图片进行特殊处理的途径。参考了 后，得到如下信息:chrome提供了访问粘贴板中二进制数据的接口(clipboardData.items)，并提供了将其转换为文件的方法(getAsFile)。demo 如下（里面用到的图像请自行替换）：&html&
&title&test chrome paste image&/title&
DIV#editable {
width: 400px;
height: 300px;
border: 1px dashed blue;
&script type="text/javascript"&
window.onload=function() {
function paste_img(e) {
if ( e.clipboardData.items ) {
// google-chrome
alert('support clipboardData.items(chrome ...)');
ele = e.clipboardData.items
for (var i = 0; i & ele.length; ++i) {
if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
var blob = ele[i].getAsFile();
window.URL = window.URL || window.webkitURL;
var blobUrl = window.URL.createObjectURL(blob);
console.log(blobUrl);
var new_img= document.createElement('img');
new_img.setAttribute('src', blobUrl);
var new_img_intro = document.createElement('p');
new_img_intro.innerHTML = 'the pasted img url(open it in new tab): &br /&&a target="_blank" href="' + blobUrl + '"&' + blobUrl + '&/a&';
document.getElementById('editable').appendChild(new_img);
document.getElementById('editable').appendChild(new_img_intro);
alert('non-chrome');
document.getElementById('editable').onpaste=function(){paste_img(event);return false;};
&h2&test image paste in browser&/h2&
&div id="non-editable" &
&p&copy the following img, then paste it into the area below&/p&
&img src="./128.png" /&
&div id="editable" contenteditable="true" &
&p&this is an editable div area&/p&
&p&paste the image into here.&/p&
参见 可以看到，我们获取了一个IMG元素，以及一个虚拟的uri。参考@葛亮 等的解说。我们可以用XHR将图像异步传到server上。然后分配给其一个 知乎uri ……欢迎讨论。
正在查找这方面的功能，不知道能不能从word软件直接粘贴，我试试看发此贴，如果内容不符，管理可以删除本帖。谢谢以下为从word中拷贝带有图片（好像不行，没出现图片）这个创建模式是参照了清风和野火的教程。下面我们就需要向这些目录里添加我们需要的文件了，我们需要的文件都在官方例程文件中，先看一下解压后的内容：目前对我们有用的就两个目录：Libraries和Project，我们先从Libraries里面拷贝一些文件到我们自己的目录里，先把官方的库函数拷贝到我们目录下的Lib中：以下为从网页内容拷贝来：买了官方的st-link,用了不到2个星期，就突然坏掉了，更新了固件库，故障依旧。找了块stm32开发板,第一次用STVP软件烧录，却可以烧录，就是SWIM接口不行，就在淘宝上逃了一块山寨st-link.非常好用，第一感觉就是速度太快了，呵呵！真是磨刀不误砍柴工呀！ 先上图：这是一开始买的st-link.
-----------------------------updata--- 19:54:51----------------------------------OK，那就来个新的猜测吧，靠，这么技术性的东西，只能狂猜一通了。1、测试环境：WP，使用本地图片（浏览器打开）右键-复制》粘贴：&img alt="" src="file:///C:/test.jpg" /&
同理，网络上的一张图片：&img alt="" src="http://baidu.sb/test.jpg" /&
而知乎禁止外链，通过某些方法将图片上传到服务器。2、靠，然而，现在的问题是：截图后粘贴，WP完全无法处理，而知乎这编辑器却可以，目测编辑器原因。首先有点可以肯定的是，截图后是以二进制数据保存在剪切板中，具体怎么实现粘贴的？！硬着头皮看了下编辑器的JS文件：我哭了（差点），压缩了怎么看啊看锤子看！目测应该是下面这段代码的原因，因为对JS不慎了解，大牛自己看吧：...a.eI.css(c[b])}r.rw=function(a){var b=this;a.clipboardData&&y.contains(a.clipboardData.types,"Files")&&y.forEach(a.clipboardData.items,function(c){-1&c.type.indexOf("image")&&(zE(b,c.getAsFile()),a.preventDefault())})};
r.Wq=function(a){var b=this;b.o.execCommand("clearlorem");var c=a.dataTransfer.files;document.createElement("img");a.preventDefault();var d=[];y.forEach(c,function(a){-1&a.type.indexOf("image")?(zE(b,a),d.push(i)):d.push(l)});...
好吧 作为一个正在研究html5 file和clipboarddata的用户 正好有资格回答这个问题首先在比较新版本的chrome下 具体也及不说版本了
firefox和ie(包括ie11)获取不到图片file 上传服务器有一定的难度 不过添加到编辑器问题不大
具体看下面各浏览器说明：chrome：支持paste很好 而且有权限获取剪贴板的图片file数据 所以可以直接获取后ajax上传firefox和ie(包括ie11)貌似有雷同的问题 无法获取clipboarddata的图片信息即相关file 不过msdn和mdn上貌似都有说相关的获取 不过本人测试了下MSDN上的window.clipboarddata.getdata("URL")[这里有大小写我忽略了,懂的人自己明白] 貌似无法获取
目前firefox虽然也是event里能获取如同chrome 不过图片file一样无法获取到数据
所以在firefox和ie下 只要添加过
contenteditable 你只要复制相关图片信息自动就会帮你转化图片datauri信息并添加到编辑框到这里 有firefox和ie的好的解决方案的朋友或高手可以指点下我 万分感谢！！
知乎果然强大
已有帐号？
无法登录？
社交帐号登录