### 拖拽
//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传到接口里
### 拖拽
//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传到接口里