HTML5 拖拽 & fabric 插件

拖拽
//html


//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,
获取: 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_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传到接口里

发表评论