web输入框中实现复制粘贴图片

来源与我自己的sae，http://gausszh.sinaapp.com/blog/view/1/

这里有两种情况，

1. 监听 paste事件可以获取图片的Blob数据
2. 无法获取，但是这个图片会以base64的形式插入到网页中

开始之前先了解一些概念FormData、Blob、File、ArrayBuffer、DataView，可以参考xhr2中的新数据类型
下面分开来讲

无法获取Blob的图片

比如在firefox中，但是这个图片会以base64的形式插入到网页中

我的做法是获取图片的base64编码数据再将其上传到服务器
var imgs = $('img', your-editor-selector)

图片的形式为

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

var binary_str = atob(base64_img); //转为原始编码
var array = new Uint8Array(new ArrayBuffer(binary_str.length));
for ( var i = 0;  i < binary_str.length; i++) {
    array[i] = bb.charCodeAt(i);
}
var dv = new DataView(array.buffer);
var blob_img = new Blob([dv], {'type': 'image/png'});
//获取了blob类型的图片数据之后就好办了
var form = new FormData();
form.append('img_name', blob_img);
var xhr=new XMLHttpRequest();
xhr.open('POST', your_img_server);
xhr.onload = function (e) {
    //your code
};

xhr.send(form);

这样服务端就可以获取到图片数据了，这和平常用形式上传没什么区别。我用flask测试，服务端获取图片的方式是 request.files.get('img_name')

实际的编码中需要避免重复上传图片，怎么表示两张图片是重复的呢，我是通过计算其base64格式的字符串的hash值，推荐code.google.com/p/crypto-js的sha1，速度很快

补充一句，怎么显示上传的进度信息呢？以及传递参数
在xhr 的第二版中，新增了一个progress事件，就是表示进度的信息。

1 2 3 4 5 6 7 8 9

progress_f = function ( event ) { if (event.lengthComputable) { var percentComplete = event.loaded / event.total * 100; var klass = arguments.callee.klass; //这个重点 var progress_tag = $('.' + klass ); progress_tag.innerHTML = '正在上传....'+ percentComplete + '%' } } progress_f.klass = '123'; //传递 k,v 为 klass, 123的参数

监听 paste事件可以获取图片的Blob数据

比如在chrome中，这相对于上一步来说是省略了base64转Blob的步骤。
为了统一处理，我这里多此一举的将Blob转为base64，然后套用上面的处理逻辑。
监听paste事件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/** * 复制粘贴图片，chrome * @param {event} e */ $(your-editor-selector).bind('paste', function(e){ var clip = e.originalEvent.clipboardData || e.clipboardData; if ( !/image/.test(clip.types[0])) { //只处理图片 return true; } var items = clip.items; if ( items ) { var img_blob = items[0].getAsFile(); //获取图片的blob数据 var rd = new FileReader(); rd.onload = function ( e ) { var base64_img = rd.result; document.execCommand("insertHTML",false,'+ base64_img + '">'); } rd.readAsDataURL(img_blob); e.preventDefault(); } });