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， <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传到接口里