Skip to content

Commit

Permalink
add strokeColor property for cropper
Browse files Browse the repository at this point in the history
  • Loading branch information
@GHarutyunyan
GHarutyunyan committed Apr 15, 2020
1 parent 2726cf8 commit 510870f
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 174 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.6",
"version": "3.0.7",
"description": "vue-image-markup will provide you to edit uploaded image easily and save it.",
"main": "src/Editor.vue",
"repository": {
Expand Down
138 changes: 76 additions & 62 deletions src/Editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@
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) {
Expand Down Expand Up @@ -238,6 +238,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();
Expand All @@ -252,9 +253,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;
Expand Down Expand Up @@ -293,8 +294,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 {
Expand All @@ -305,8 +310,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();
}
Expand Down Expand Up @@ -389,69 +398,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())
}
Expand All @@ -471,9 +485,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();
Expand Down
Loading

0 comments on commit 510870f

Please sign in to comment.