chrome及safari浏览器实现直接粘贴图片（纯JS）

标签：浏览器   chrome   safari   服务器   html5   

    相信大家在一些网站上看到通过QQ截图，然后粘贴图片就可以在网站实现预览该截图的功能，这么便捷的操作是不是非常利于用户的体验呢。

    下面通过JQUERY进行实现这一个功能，并且实现上传该图片到后端服务器。主要利用的是HTML5的clipboardData及FileReader，目前支持chrome及safari浏览器。

1、粘贴事件绑定

首先进行绑定paste事件，触发paste事件时获取到剪贴板的内容

然后对内容进行过滤出文件为图片类型的内容，通过FileReader生成dataurl文件资源，将该资源传递给IMG标签的src即可进行预览.

如需要对图片进行裁剪功能可以使用一个JQUERY插件(jcrop):http://code.ciaoca.com/jquery/jcrop/

$("body").on(‘paste‘,pastepic);
var pastepic=function(event){
	if (event.originalEvent) {
	    event = event.originalEvent;
	}
	var clipboardData = event.clipboardData;
	if (clipboardData && clipboardData.items) {
		item = clipboardData.items[0];
		types = clipboardData.types || [];
                for (var i = 0; i < types.length; i++) {
			if (types[i] === ‘Files‘) {
    			    item = clipboardData.items[i];
				break;
			}
		}
		if (item && item.kind === ‘file‘ && item.type.match(/^image\//i)) {
			var blob = item.getAsFile(), reader = new FileReader();
			reader.onload = function(e) {
				var imgStr = e.target.result;
				if (imgStr.indexOf(‘base64,‘) != -1) {
					showpic(imgStr);
				}
			};
			reader.readAsDataURL(blob);
			}else{
				alert(‘该粘贴内容非图片格式~‘);
			}
		}else{
			alert(‘没有发现粘贴内容~‘);
		}
	}

2、上传到后端服务器

简单的AJAX异步过程调用，只是获取图片值的时候只需要获取图片的src即可

var data={}
data[‘pic‘]=$(‘#picture‘).attr(‘src‘);
$.ajax({
	‘url‘:"upload.php",
	‘data‘:data,
	‘type‘:‘post‘,
	‘dataType‘:‘json‘,
	‘success‘:function(data){
		alert(data.msg);
	},
	‘error‘:function(data){
	    alert(‘上传失败‘)
	},
	‘complete‘:function(data){
		$(‘#uploadimg‘).val(‘上传完成‘);
	}
})

3、后端服务器处理

通过传递过来的图片src可以获取到data-type（即图片类型），在"base64,"之后为图片的内容，该内容已经经过base64编码，因此需要进行转码后进行保存到服务器。

<?php
/**
* 图片上传后端
* author:lailaiji@163.com
* QQ:272388404
**/
$success = false;
$msg = ‘‘;
try {
    $directory = ‘upload/‘; //使用相对路径
    $filename = ‘‘; //保存的图像文件
    $src = $_POST[‘pic‘];
    if (strpos($src, ‘http://‘) != 0)
        throw new Exception(‘没有发现图片URL‘, 206);
    $filename = uniqid(‘upimg‘) . ‘.jpg‘;
    $ext_name = ‘jpg‘;
    $basepos = strpos($src, ‘base64,‘);
    if ($basepos != -1) {
        $src = substr($src, $basepos + 7);
        $src = base64_decode($src);
        $rs = file_put_contents($directory . $filename, $src);
    } else {
        $rs = file_put_contents($directory . $filename, file_get_contents($src));
    }
    if (!$rs)
        throw new Exception(‘上传文件失败，可能原因是服务器‘ . $directory . ‘目录没有写入权限‘, 204);
    if (!$filename) {
        throw new Exception(‘没有发现图像文件‘, 204);
    }
    $msg = ‘上传成功：文件名：‘.$directory . $filename;
    $success=true;
} catch (Exception $exc) {
    $msg = "上传失败：".$exc->getMessage();
}
$data = array(‘success‘ => $success, ‘msg‘ => $msg);
echo json_encode($data);
?>

本文出自 “PHP开垦农民” 博客，请务必保留此出处http://lailaiji.blog.51cto.com/1790290/1570340

chrome及safari浏览器实现直接粘贴图片（纯JS）

标签：浏览器   chrome   safari   服务器   html5   

原文地址：http://lailaiji.blog.51cto.com/1790290/1570340