HTML5 拖拽 & fabric 插件

### 拖拽

//html
<div ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="id" draggable="true" ondragstart="drag(event)" src="1.jpg">
//js
function allowDrop(ev)
{
//调用 preventDefault() 来避免浏览器对数据的默认处理
（drop 事件的默认行为是以链接形式打开）
ev.preventDefault();
}

function drag(ev)
{
//img 对象的ID属性
ev.dataTransfer.setData("Text",ev.target.id);
}
//放
function drop(ev) {
var id = ev.dataTransfer.getData("Text");

ev.preventDefault();
}

### fabric

> 导入JS，地址 https://github.com/kangax/fabric.js
官方资料：http://fabricjs.com/

创建canvas， `<canvas id="C" ></canvas>`
获取：` var canvas = new fabric.Canvas('C');`

* 添加背景：

fabric.Image.fromURL('bg_03.png', function(img) {
canvas.backgroundImage = img;
canvas.backgroundImage.width = 600;
canvas.backgroundImage.height = 600;
canvas.add(img).renderAll();
});

* 添加图片，不能跨域

fabric.Image.fromURL('10db473f-8cc3-4c61-b6b0-cea3eabafed8.jpg',function (img){
img.scale(0.3);//缩放比例
var top = clientY - (img.currentHeight/2); //设置位置
var left = clientX - (img.currentWidth/2);
img.set({top:top, left:left,borderColor: 'gray', cornerColor: '#000',});
/*img.filters.push(
new fabric.Image.filters.RemoveWhite({threshold: 60, distance: 60})
);
img.applyFilters(canvas.renderAll.bind(canvas));*/
//添加到画布
canvas.add(img);
//设置为当前选中
canvas.setActiveObject(img);
})
// 绘制在画布上
canvas..renderAll();

* 去白底过滤器

//获取当前选中对象，
var act_obj = canvas.getActiveObject();
//设置里面的filters属性
act_obj.filters.push(
new fabric.Image.filters.RemoveWhite({threshold: 60, distance: 60})
);

$("#remove-white").click(function (){
applyFilter(1, this.checked && new fabric.Image.filters.RemoveWhite({
threshold: 60,
distance: 60
}));
})

* 点击canvas对象事件

canvas.on({
//选中
'object:selected': function() {

},
//失去焦点
'selection:cleared': function() {
}
});

* 添加过滤器，并将图像对象绑定到画布

function applyFilter(index, filter) {
var obj = canvas.getActiveObject();
obj.filters[index] = filter;
obj.applyFilters(canvas.renderAll.bind(canvas));
}

* 删除

ca = canvas.getActiveObject();
canvas.remove(ca);
canvas.renderAll();

* 裁剪

//获取当前选中对象
var act_obj = canvas.getActiveObject();
//定位信息
var act_width = act_obj.currentWidth;
var act_height = act_obj.currentHeight;
var act_left = act_obj.left;
var act_top = act_obj.top;

var cur_img = act_obj._element.currentSrc;
var image_name = act_obj._element.currentSrc;
//加入到裁剪框
$(".img_box_clip_div").html('');
var html = '<img id="cropTestImg" width="'+ act_width +'" height="'+act_height+'" src="'+ image_name + '" />';
$(".img_box_clip_div").append(html);
//调用裁剪功能
var oImg = document.getElementById("cropTestImg");
var oEndBtn = document.getElementById("cropEndBtn");
fnImageCropRot(oImg);
//复制一份
var copy_obj = fabric.util.object.clone(act_obj);
//等比例放置
copy_obj.scale(1).set({
left: act_left,
top: act_top,
width:act_width,
height:act_height,
//裁剪，原位置在中心，要定位在左上
clipTo: function (ctx) {
ctx.rect(-(act_width/2)+parseInt(x),-(act_height/2)+parseInt(y),w,h);
}
});

* 图片导出及发布

原理：通过toDataURL获取到地址，模拟一个链接并点击

//这段要通过点击事件获取,start

//获取canvas元素
var canvasElement = document.getElementById(id);
//图片类型
var MIME_TYPE = "image/png";
//转换成base64
var imgURL = canvasElement.toDataURL(MIME_TYPE);

//end

//创建一个a链接，模拟点击下载
var dlLink = document.createElement('a');
dlLink.download = fileName;
dlLink.href = imgURL;
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);

//发布将解码出来的Url传到接口里