Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/lionix-team/vue-image-markup
Browse files Browse the repository at this point in the history
@lilitsimonyan98
lilitsimonyan98 committed Apr 21, 2020
2 parents 68ef9ee + f3c3966 commit 212bef2
Showing 3 changed files with 201 additions and 184 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "vue-image-markup",
"version": "3.0.7",
"version": "3.0.9",
"description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
"main": "src/Editor.vue",
"repository": {
142 changes: 79 additions & 63 deletions src/Editor.vue
View file
Original file line number Diff line number Diff line change
@@ -45,12 +45,12 @@
this.canvas = new fabric.Canvas('c');
this.canvas.setDimensions({width: this.canvasWidth, height: this.canvasHeight});
this.canvas.backgroundColor = "#fff";
let canvasProperties = {width:this.canvas.width,height:this.canvas.height}
let currentCanvas = { json: this.canvas.toJSON(),canvas: canvasProperties};
new CanvasHistory(this.canvas,currentCanvas);
let canvasProperties = {width: this.canvas.width, height: this.canvas.height}
let currentCanvas = {json: this.canvas.toJSON(), canvas: canvasProperties};
new CanvasHistory(this.canvas, currentCanvas);
},
methods: {
setBackgroundImage(imageUrl) {
setBackgroundImage(imageUrl, backgroundColor = "#fff") {
let img = new Image();
this.toDataUrl(imageUrl, (dataUri) => {
img.src = dataUri;
@@ -86,6 +86,8 @@
});
inst.canvas.renderAll()
}
inst.canvas.backgroundColor = backgroundColor;
inst.canvas.renderAll()
}
});
},
@@ -238,6 +240,7 @@
borderColor: (params && params.borderColor) ? params.borderColor : "#000",
cornerColor: (params && params.cornerColor) ? params.cornerColor : "#000",
cornerStyle: (params && params.cornerStyle) ? params.cornerStyle : "circle",
strokeColor: (params && params.strokeColor) ? params.strokeColor : "#000",
};
this.currentActiveMethod = this.cropImage;
this.drag();
@@ -252,9 +255,9 @@
this.canvas.on("mouse:down", function () {
if (inst.canvas.getActiveObject()) {
inst.canvas.remove(inst.canvas.getActiveObject());
let canvasProperties = {width:inst.canvas.width,height:inst.canvas.height}
let currentCanvas = { json: inst.canvas.toJSON(),canvas: canvasProperties};
new CanvasHistory(inst.canvas,currentCanvas);
let canvasProperties = {width: inst.canvas.width, height: inst.canvas.height}
let currentCanvas = {json: inst.canvas.toJSON(), canvas: canvasProperties};
new CanvasHistory(inst.canvas, currentCanvas);
}
});
break;
@@ -293,8 +296,12 @@
scaleX: scaleFactor,
scaleY: scaleFactor
});
let canvasProperties = {width:inst.canvas.width,height:inst.canvas.height};
let currentCanvas = {json: inst.canvas.toJSON(), croppedImage: inst.canvas.toDataURL(),canvas:canvasProperties};
let canvasProperties = {width: inst.canvas.width, height: inst.canvas.height};
let currentCanvas = {
json: inst.canvas.toJSON(),
croppedImage: inst.canvas.toDataURL(),
canvas: canvasProperties
};
new CanvasHistory(inst.canvas, currentCanvas)
inst.canvas.renderAll();
} else {
@@ -305,8 +312,12 @@
originX: 'center',
originY: 'center'
});
let canvasProperties = {width:inst.canvas.width,height:inst.canvas.height};
let currentCanvas = {json: inst.canvas.toJSON(), croppedImage: inst.canvas.toDataURL(),canvas:canvasProperties};
let canvasProperties = {width: inst.canvas.width, height: inst.canvas.height};
let currentCanvas = {
json: inst.canvas.toJSON(),
croppedImage: inst.canvas.toDataURL(),
canvas: canvasProperties
};
new CanvasHistory(inst.canvas, currentCanvas)
inst.canvas.renderAll();
}
@@ -389,69 +400,74 @@
}
this.drag();
this.history = new CanvasHistory();
if (this.history.length) {
this.objects.push(this.history.pop())
if (this.history.length) {
this.objects.push(this.history.pop())
if (this.history[this.history.length - 1]) {
if(this.history[this.history.length - 1].canvas){
if (this.history[this.history.length - 1].canvas) {
let lastCanvasProperties = this.history[this.history.length - 1].canvas;
if(lastCanvasProperties.width != this.canvas.width || lastCanvasProperties.height != this.canvas.height){
this.canvas.setDimensions({width: lastCanvasProperties.width,height:lastCanvasProperties.height})
}
if (lastCanvasProperties.width != this.canvas.width || lastCanvasProperties.height != this.canvas.height) {
this.canvas.setDimensions({
width: lastCanvasProperties.width,
height: lastCanvasProperties.height
})
}
JSON.parse(JSON.stringify(this.history[this.history.length - 1]))
this.canvas.loadFromJSON(this.history[this.history.length - 1].json)
}
if(this.history[this.history.length - 1].croppedImage && this.history[this.history.length - 1].imagePosition){
}
if (this.history[this.history.length - 1].croppedImage && this.history[this.history.length - 1].imagePosition) {
let inst = this;
fabric.Image.fromURL(this.history[this.history.length - 1].croppedImage, function(img) {
img.set({
top:-( inst.history[inst.history.length - 1].imagePosition.top),
left:-( inst.history[inst.history.length - 1].imagePosition.left),
originX: 'center',
originY: 'center'
});
inst.canvas.setBackgroundImage(img, inst.canvas.renderAll.bind(inst.canvas));
});
}
else{
this.setBackgroundImage(this.history[this.history.length - 1].croppedImage)
}
this.canvas.renderAll();
}
fabric.Image.fromURL(this.history[this.history.length - 1].croppedImage, function (img) {
img.set({
top: -(inst.history[inst.history.length - 1].imagePosition.top),
left: -(inst.history[inst.history.length - 1].imagePosition.left),
originX: 'center',
originY: 'center'
});
inst.canvas.setBackgroundImage(img, inst.canvas.renderAll.bind(inst.canvas));
});
} else {
this.setBackgroundImage(this.history[this.history.length - 1].croppedImage)
}
this.canvas.renderAll();
}
}
},
redo() {
this.drag();
if (this.objects.length > 0) {
if(this.objects[this.objects.length - 1]){
if(this.objects[this.objects.length - 1].canvas){
if (this.objects[this.objects.length - 1]) {
if (this.objects[this.objects.length - 1].canvas) {
let lastCanvasProperties = this.objects[this.objects.length - 1].canvas;
if(lastCanvasProperties.width != this.canvas.width || lastCanvasProperties.height != this.canvas.height){
this.canvas.setDimensions({width: lastCanvasProperties.width,height:lastCanvasProperties.height})
}
JSON.parse(JSON.stringify(this.objects[this.objects.length - 1]))
this.canvas.loadFromJSON(this.objects[this.objects.length - 1].json)
if (lastCanvasProperties.width != this.canvas.width || lastCanvasProperties.height != this.canvas.height) {
this.canvas.setDimensions({
width: lastCanvasProperties.width,
height: lastCanvasProperties.height
})
}
if (this.objects[this.objects.length - 1].imagePosition && this.objects[this.objects.length - 1].croppedImage) {
let currentProperties;
JSON.parse(JSON.stringify(this.objects[this.objects.length - 1]))
this.canvas.loadFromJSON(this.objects[this.objects.length - 1].json)
}
if (this.objects[this.objects.length - 1].imagePosition && this.objects[this.objects.length - 1].croppedImage) {
let currentProperties;
currentProperties = this.objects[this.objects.length - 1].imagePosition;
let inst = this;
fabric.Image.fromURL(this.objects[this.objects.length - 1].croppedImage, function(img) {
console.log(currentProperties,"AA")
img.set({
top:-( currentProperties.top),
left:-( currentProperties.left),
originX: 'center',
originY: 'center'
});
inst.canvas.setBackgroundImage(img, inst.canvas.renderAll.bind(inst.canvas));
});
}
fabric.Image.fromURL(this.objects[this.objects.length - 1].croppedImage, function (img) {
console.log(currentProperties, "AA")
img.set({
top: -(currentProperties.top),
left: -(currentProperties.left),
originX: 'center',
originY: 'center'
});
inst.canvas.setBackgroundImage(img, inst.canvas.renderAll.bind(inst.canvas));
});
}
}
new CanvasHistory(false, false, this.objects.pop())
}
@@ -471,9 +487,9 @@
let inst = this;
this.canvas.on("object:added", function () {
if (inst.canvas.isDrawingMode) {
let canvasProperties = {width:inst.canvas.width,height:inst.canvas.height}
let currentCanvas = { json: inst.canvas.toJSON(),canvas: canvasProperties};
new CanvasHistory(inst.canvas,currentCanvas);
let canvasProperties = {width: inst.canvas.width, height: inst.canvas.height}
let currentCanvas = {json: inst.canvas.toJSON(), canvas: canvasProperties};
new CanvasHistory(inst.canvas, currentCanvas);
}
});
this.canvas.renderAll();
241 changes: 121 additions & 120 deletions src/assets/js/crop.js
View file
Original file line number Diff line number Diff line change
@@ -2,155 +2,156 @@ import {fabric} from "fabric";
import CanvasHistory from "./canvasHistory";

export default (function () {

let disabled = false;
let object;
let src;
let drag;
let clipRect,rect,rectRed;
let clipRect, rect, rectRed;
let overlay = {};
let properties;
let cropperWidth,cropperHeight;
function CropImage(canvas,draggable = false,apply = false,cancel = false,params) {
let properties

function CropImage(canvas, draggable = false, apply = false, cancel = false, params) {
this.canvas = canvas;
if(cancel){
if (cancel) {
this.canvas.remove(clipRect);
this.canvas.remove(rect);
this.canvas.remove(rectRed);
}
if(!draggable){
if (!draggable) {
drag = false;
return CropImage;
}
drag = draggable;
disabled = false;
properties = params;
canvas.backgroundColor = "#fff";
src = canvas.toDataURL('image/jpeg');
src = canvas.toDataURL('image/jpeg');
fabric.util.loadImage(src, function (img) {
object = new fabric.Image(img);
object.selectable = false;
})
if(drag && apply){
object = new fabric.Image(img);
object.selectable = false;
})

if (drag && apply) {
canvas.clear();
let overlayCropped = overlay.toDataURL();
let overlayCropped = overlay.toDataURL();
fabric.util.loadImage(overlayCropped, function (img) {

let clippedImage = new fabric.Image(img);
canvas.setBackgroundImage(clippedImage, canvas.renderAll.bind(canvas), {
top: -(clipRect.top),
left: -(clipRect.left),
originX: 'center',
originY: 'center',
});
canvas.setDimensions({width: clipRect.width * clipRect.scaleX, height: clipRect.height * clipRect.scaleY});
})

drag = false;
apply= false;
let clippedImage = new fabric.Image(img);
canvas.setBackgroundImage(clippedImage, canvas.renderAll.bind(canvas), {
top: -(clipRect.top),
left: -(clipRect.left),
originX: 'center',
originY: 'center',
});
canvas.setDimensions({
width: clipRect.width * clipRect.scaleX,
height: clipRect.height * clipRect.scaleY
});
})

drag = false;
apply = false;
let canvasProperties = {width: clipRect.width * clipRect.scaleX, height: clipRect.height * clipRect.scaleY}
let croppedImage = { json: this.canvas.toJSON(), croppedImage: overlayCropped,canvas: canvasProperties,imagePosition:clipRect};
new CanvasHistory(this.canvas,croppedImage);
let croppedImage = {
json: this.canvas.toJSON(),
croppedImage: overlayCropped,
canvas: canvasProperties,
imagePosition: clipRect
};
new CanvasHistory(this.canvas, croppedImage);
return CropImage
}
if(canvas.width <= properties.width || canvas.height <= properties.height){
cropperWidth = canvas.width - 50;
cropperHeight = canvas.height - 50;
}
else{
cropperWidth = properties.width;
cropperHeight = properties.height;
}
this.bindEvents();
this.canvas.selectable = false;

this.bindEvents();
this.canvas.selectable = false;
this.canvas.renderAll();
let inst = this;
new fabric.Image.fromURL(src, function(oImg) {
rect = new fabric.Rect({
left: 0,
top: 0,
width: oImg.width,
height: oImg.height,
fill: properties.overlayColor,
selectable: false,
opacity:properties.overlayOpacity
new fabric.Image.fromURL(src, function (oImg) {
rect = new fabric.Rect({
left: 0,
top: 0,
width: oImg.width,
height: oImg.height,
fill: properties.overlayColor,
selectable: false,
opacity: properties.overlayOpacity
});
inst.canvas.add(rect);
fabric.Image.fromURL(src, function(oImg1) {
rectRed = new fabric.Rect({
left: (oImg1.width - properties.width)/ 2,
top: (oImg1.height - properties.height)/ 2,
width: cropperWidth,
height: cropperHeight,
fill: '',
imageWidth: oImg1.width,
imageHeight: oImg1.height,
cornerSize:properties.cornerSize,
hasControls: properties.hasControls,
borderColor: properties.borderColor,
cornerColor: properties.cornerColor,
cornerStyle: properties.cornerStyle,
transparentCorners: properties.transparentCorners,
hasRotatingPoint: properties.hasRotatingPoint,
lockUniScaling:true,
noScaleCache:false,
strokeUniform:true,
clipTo: function(context) {
context.translate(- this.width/2, - this.height/2);
for (let x = 0; x <= this.width; x += this.width/3) {
context.moveTo(x , 0);
context.lineTo(x, this.height);
}
for (let y = 0; y <= this.height; y += this.height/3) {
context.moveTo(0, y);
context.lineTo(this.width, y);
}
context.strokeStyle = "rgba(0,0,0,0.4)";
context.stroke();
}
});
clipRect = new fabric.Rect({
left: -(cropperWidth /2),
top: -(cropperHeight/2),
width: cropperWidth,
height: cropperHeight,
fill: '',
selectable:false,
});
oImg1.set({clipPath:clipRect, selectable: false})
inst.canvas.add(oImg1);
overlay = inst.canvas._objects[inst.canvas._objects.length - 1];
inst.canvas.add(rectRed);
inst.canvas.bringToFront(rectRed)
inst.canvas.setActiveObject(rectRed)
fabric.Image.fromURL(src, function (oImg1) {
rectRed = new fabric.Rect({
left: (oImg1.width - properties.width) / 2,
top: (oImg1.height - properties.height) / 2,
width: properties.width,
height: properties.height,
fill: '',
imageWidth: oImg1.width,
imageHeight: oImg1.height,
cornerSize: properties.cornerSize,
hasControls: properties.hasControls,
borderColor: properties.borderColor,
cornerColor: properties.cornerColor,
cornerStyle: properties.cornerStyle,
transparentCorners: properties.transparentCorners,
hasRotatingPoint: properties.hasRotatingPoint,
lockUniScaling: true,
noScaleCache: false,
strokeUniform: true,
clipTo: function (context) {
context.translate(-this.width / 2, -this.height / 2);
for (let x = 0; x <= this.width; x += this.width / 3) {
context.moveTo(x, 0);
context.lineTo(x, this.height);
}

for (let y = 0; y <= this.height; y += this.height / 3) {
context.moveTo(0, y);
context.lineTo(this.width, y);
}
context.strokeStyle = properties && properties.strokeColor ? properties.strokeColor : '#000';
context.stroke();
}
});
clipRect = new fabric.Rect({
left: -(properties.width / 2),
top: -(properties.height / 2),
width: properties.width,
height: properties.height,
fill: '',
selectable: false,
});
oImg1.set({clipPath: clipRect, selectable: false})

inst.canvas.add(oImg1);
overlay = inst.canvas._objects[inst.canvas._objects.length - 1];
inst.canvas.add(rectRed);
inst.canvas.bringToFront(rectRed)
inst.canvas.setActiveObject(rectRed)
});
});
this.canvas.renderAll();
});
this.canvas.renderAll();
};
CropImage.prototype.bindEvents = function () {
let inst = this;
inst.canvas.on("mouse:down", function (o) {
inst.onMouseDown(o);
});
inst.canvas.on("object:scaling", function(e) {
let target = e.target;
clipRect = new fabric.Rect({
left: target.left - (overlay.width / 2),
top: target.top - (overlay.height / 2),
width: target.width,
height: target.height,
fill: '',
scaleX: target.scaleX,
scaleY: target.scaleY,
});
overlay.set("clipPath",clipRect)
inst.canvas.renderAll()
inst.canvas.on("object:scaling", function (e) {
let target = e.target;
clipRect = new fabric.Rect({
left: target.left - (overlay.width / 2),
top: target.top - (overlay.height / 2),
width: target.width,
height: target.height,
fill: '',
scaleX: target.scaleX,
scaleY: target.scaleY,
});
overlay.set("clipPath", clipRect)
inst.canvas.renderAll()

});
inst.canvas.on('object:moving', function (e) {
inst.canvas.on('object:moving', function (e) {
let target = e.target;
clipRect = new fabric.Rect({
left: target.left - (overlay.width / 2),
@@ -160,19 +161,19 @@ export default (function () {
fill: '',
scaleX: target.scaleX,
scaleY: target.scaleY,
});
overlay.set("clipPath",clipRect)
});
overlay.set("clipPath", clipRect)
inst.canvas.renderAll()
});
});

CropImage.prototype.onMouseDown = function (event) {
let inst = this;
let inst = this;
if (disabled || !drag) {
return CropImage
}
}
inst.canvas.setActiveObject(rectRed);
};
};

return CropImage;
}());
}());

0 comments on commit 212bef2

Please sign in to comment.