描述：实现类似QQ截图删上传图片的功能
a、需要的js插件
paste.image.js 地址：https://github.com/iyangyuan/pasteimg
b、paste.image.js
(function($,exports){
$.fn.extend({
pasteImage: function(callback){
var util = {
/*
* @function:
* 从指定类继承，并且带简单数据构造器
* @params:
* parent 0个构造参数的父类，默认Object
* @return:
* 子类，可以访问父类的prototype属性
*/
extend: function(parent){
/*
* @example:
* if the param construct={name: "nadel"};
* then the function construct will like:
* function(name){
* this.name = name;
* }
*/
parent = parent || Object;
var fn = function(construct){
var attribute = "";
for(attribute in construct){
if(Object.prototype.hasOwnProperty.call(construct, attribute)){
this[attribute] = construct[attribute];
}
}
};
fn.prototype = new parent();
strategys.push(fn);
return fn;
},
/*
* @function:
* 遍历数组中的object，根据正则匹配指定属性
* @params:
* array object数组
* property object属性
* regex object属性值正则表达式
* @return:
* 匹配到的object数组
*/
getProperty: function(array, property, regex){
var result = [],
i = 0;
for(i = 0; i<array.length; i++){
if(regex.test(array[i][property])){
result.push(array[i]);
}
}
return result;
},
/*
* @function:
* 将image document对象转换为DataUrl
* @params:
* element: image document对象，可以用document.getElementById获取
* type: 生成的图片类型，例如：image/png，默认为image/png
* @return:
* DataUrl
*/
imageToDataUrl: function(element, type){
type = type || "image/png";
try{
//利用canvas获取图片的DataUrl，但受跨域限制
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
result = "";
canvas.width = element.width;
canvas.height = element.height;
ctx.drawImage(element, 0, 0);
result = canvas.toDataURL(type);
if(result === "data:,"){
result = "";
}
return result;
}catch(e){
//目标服务器不允许跨域访问资源
return "";
}
},
/*
* @functions:
* 将一个类数组中的数据push到真正的数组中
* @params:
* array 数组
* arrayLike 类数组
*/
arrayLikePush: function(array, arrayLike){
var i = 0;
for(i = 0;i<arrayLike.length;i++){
array.push(arrayLike[i]);
}
}
},
strategys = [],
strategy = {},
i = 0;
//算法类(接口)
var Strategy = function(){};
Strategy.prototype.exec = function(){
//意在必须重写
throw new Error("The method 'chrome' must be override!");
};
Strategy.prototype.isSuport = function(){
throw new Error("The method 'chrome' must be override!");
};
//谷歌浏览器算法
var Chrome = util.extend(Strategy);
Chrome.prototype.exec = function(){
var that = this;
that.$element.on("paste",function(event){
var items = (event.clipboardData || event.originalEvent.clipboardData).items,
//取出html对象
htmlBlobs = util.getProperty(items, "type", /^text/html$/im),
imgElements = [],
loadedCount = 0,
htmlImages = [],
htmlResults = [],
reader = {},
parseFinish = function(){
var $html = {},
$imageLoadDiv = {};
if(htmlResults.length === htmlBlobs.length){
//解析html中的图片
for(k = 0;k<htmlResults.length;k++){
$html = htmlResults[k].replace(/
|
|
/g, "");
$html = $html.replace("<html><body>", "<div>");
$html = $html.replace("</body></html>", "</div>");
$html = $($html);
util.arrayLikePush(imgElements, $html.find("img"));
}
//图片预加载
$("body").append(imageLoadDiv);
$imageLoadDiv = $("#paste_image_load");
for(k = 0; k<imgElements.length; k++){
imgElements[k].onload = imgOnload;
$imageLoadDiv.append(imgElements[k]);
}
}
},
loadFinish = function(){
var dataurl = "",
k = 0;
if(imgElements.length === loadedCount){
//尝试将图像dom转换成dataurl，如果失败，返回img src
for(k = 0;k<imgElements.length;k++){
dataurl = "";
dataurl = util.imageToDataUrl(imgElements[k]);
if(dataurl){
htmlImages.push(dataurl);
}else{
htmlImages.push(imgElements[k].getAttribute("src"));
}
}
$("#paste_image_load").remove();
//返回结果
that.callback(htmlImages);
}
},
imgOnload = function(){
loadedCount = loadedCount+1;
loadFinish();
},
imageLoadDiv = "<div id='paste_image_load' style='height: 0; 0;display: none;'></div>",
i = 0;
//提取html对象中的图片
for(i = 0;i<htmlBlobs.length;i++){
htmlBlobs[i].getAsString(function(html){
htmlResults.push(html);
parseFinish();
});
}
});
};
Chrome.prototype.isSuport = function(){
return window.navigator.userAgent.toLowerCase().indexOf("chrome")>-1;
};
//火狐浏览器和IE11浏览器算法
var FirefoxAndIE11 = util.extend(Strategy);
FirefoxAndIE11.prototype.exec = function(){
var that = this,
clipboardDiv = "<div id='paste_content_catch' contentEditable='true' style='position: fixed;left: -9999px;top: -9999px; opacity: 0;'></div>",
$clipboardDiv = {},
i = 0;
//初始化clipboard catch
$("body").append(clipboardDiv);
$clipboardDiv = $("#paste_content_catch");
//监听ctrl+v事件
that.$element.on("keydown",function(event){
if(event.ctrlKey == 1 && event.keyCode == 86){
$clipboardDiv.html("");
$clipboardDiv.focus();
//模拟多线程
setTimeout(function(){
var id = "paste_image_load_" + new Date().getTime(),
imageLoadDiv = "<div id='"+id+"' style='height: 0; 0;display: none;'></div>",
$imageLoadDiv = {},
imageElements = [],
images = [],
loadedCount = 0;
//获取剪切板中的img元素
imageElements = $clipboardDiv.find("img");
//图片预加载
$("body").append(imageLoadDiv);
$imageLoadDiv = $("#"+id);
for(i = 0;i<imageElements.length;i++){
imageElements[i].onload = function(){
var dataurl = "",
k = 0;
loadedCount = loadedCount+1;
if(imageElements.length === loadedCount){
//尝试将图像dom转换成dataurl，如果失败，返回img src
for(k = 0;k<imageElements.length;k++){
dataurl = "";
dataurl = util.imageToDataUrl(imageElements[k]);
if(dataurl){
images.push(dataurl);
}else{
images.push(imageElements[k].getAttribute("src"));
}
}
$imageLoadDiv.remove();
//返回结果
that.callback(images);
}
};
$imageLoadDiv.append(imageElements[i]);
}
imageElements = $imageLoadDiv.find("img");
$clipboardDiv.html("");
that.$element.focus();
},0);
}
});
};
FirefoxAndIE11.prototype.isSuport = function(){
var result = false;
try{
result = window.navigator.userAgent.toLowerCase().indexOf("firefox")>-1 ||
(Object.hasOwnProperty.call(window, "ActiveXObject") && !window.ActiveXObject);
}catch(e){}
return result;
};
//选择策略
for(i = 0;i<strategys.length;i++){
strategy = new strategys[i]({
$element: $(this),
callback: callback
});
if(strategy.isSuport()){
strategy.exec();
break;
}
}
}
});
})(jQuery,this);
c、demo.html
<body>
<input type="text" id="container" placeholder="在这粘贴图片"/>
<script>
$("#container").pasteImage(function(imgs){
$.each(imgs,function(i,n){
var imageData= n.replace("data:image/png;base64,", "");
var imageUrl=""
$.ajax({
type: "POST",
url: path+"/tmsSellMsg/uploadImageByBase64Code",
data: {"imageData":imageData},
dataType: "json",
async:false,
success: function(data){
imageUrl = data;
}
});
$("body").append("<img src='"+imageUrl+"' >");
});
});
</script>
</body>
d、springmvc
@RequestMapping(value = "/uploadImageByBase64Code", method = RequestMethod.POST)
public @ResponseBody String insertTmsSellMsgByExcel2(String imageData) throws Exception {
byte[] buf = Base64Utils.decodeFromString(imageData);
InputStream sbs = new ByteArrayInputStream(buf);
String imageUrl= OSSUtils.putObject(sbs);
return JsonUtils.objectToJson(imageUrl);
}
致此结束……
关注我的公众号,精彩内容不能错过