Client-side Image Editing In Vue – Image Markup

Markup Image with Vue.js (customizable)

vue-image-markup will provide you to edit uploaded image easily and save it.

Installation

npm i vue-image-markup

or

yarn add vue-image-markup

Usage

First import the Editor component inside your Vue component.

 import Editor from 'vue-image-markup';

Then you’ll be able to use Editor component.

Example:

You must give your editor component ref,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes.

<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor" :editorId="1"/>

mounted() {
    $this.$refs.editor.set(this.editor.mode,this.editor.options);
}

canvasWidth prop will set editor width

canvasHeight prop will set editor height

ref with the help of ref, you will control the editor

editorId (optional) will set editor id, allowing the use of multiple editors in the same component

Function set(type,params)

With the set() function you choose editor’s mode,which should get two parameters type and params

Editor have 6 modes

• text
• circle
• rect
• selectMode
• arrow
• freeDrawing
• crop

params parameter must be an object which set the type and every type have it’s own options.

Text Mode

set('text',params) to enable text mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('text')

Object key	Default Value	Description
fill	black	color
fontFamily	Arial	font-family
fontSize	32	font-size
fontWeight	100	font-weight(100,200,300,400,500,600,700,bold,normal)
fontStyle	normal	font-style(normal,italic,oblique)
placeholder	Add Text	default text placeholder when the text will be added
id	''	text id

or you can customize your editor text mode styles by overwriting default values.

 let textModeOptions = { id: 'title', fill: 'red', fontFamily: 'Verdana',fontSize: 16, placeholder: 'Type something'}
 this.$refs.editor.set('text',textModeOptions)

Circle Mode

set('circle',params) to enable circle mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('circle')

Object key	Default Value	Description
fill	transparent	Color inside circle
stroke	black	Circe border color
strokeWidth	7	Circle border width
disableCircleEditing	false	When false, can be painted custom circle. When true, always will be added circle of fixed height and width
top	0	Top position of an object
left	0	Left position of an object
radius	20	Radius of the circle
strokeUniform	true	When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
noScaleCache	false	When true, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
id	''	Circle id

or you can customize your editor circle mode styles by overwriting default values.

 let circleModeParams = { fill: 'blue',stroke: 'white' }
 this.$refs.editor.set('circle',circleModeParams)

Rectangle Mode

set('rect',params) to enable rect mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('rect')

Object key	Default Value	Description
fill	transparent	Color inside rectangle
stroke	black	Rectangle is rendered via stroke and this property specifies its color
strokeWidth	7	Rectangle border width
angle	0	Angle of rotation of an object (in degrees)
width	0	if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties
height	0	if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties
top	0	Top position of rectangle
left	0	Left position of rectangle
opacity	1	Opacity of rectangle
strokeUniform	true	When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
noScaleCache	false	When true, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
id	''	Rectangle id
or you can customize your editor rectangle mode styles by overwriting default values.

 let customizeRectangle = { fill: 'blue',stroke: 'white',strokeWidth: "5" }
 this.$refs.editor.set('rect',customizeRectangle)

Select Mode

set('selectMode') to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn’t params parameter

this.$refs.editor.set('selectMode')

Arrow Mode

set('arrow',params) to enable arrow mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('arrow')

Object key	Default Value	Description
stroke	black	Arrow is rendered via stroke and this property specifies its color
strokeWidth	7	Arrow border width
strokeUniform	true	When false, the stroke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
noScaleCache	false	When true, cache does not get updated during scaling. The picture will get blocky if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
id	''	Arrow id
or you can customize your editor’s arrow mode styles by overwriting default values.

 let customizeArrow = { stroke: 'red',strokeWidth: "3" }
 this.$refs.editor.set('arrow',customizeArrow)

Free Drawing Mode

set('freeDrawing',params) to enable free drawing mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('freeDrawing')

Object key	Default Value	Description
stroke	black	brush’s color
strokeWidth	7	brush’s width

or you can customize your editor’s free drawing mode styles by overwriting default values.

 let customizeFreeDrawing = { stroke: 'yellow',strokeWidth: "5" }
 this.$refs.editor.set('freeDrawing',customizeFreeDrawing)

Crop Mode

set('crop') to enable crop mode in editor,where params must be cropper’s parameters and has it’s default value. After calling the function, the cropper will be shown in editor.

this.$refs.editor.set('crop',params)  

Object key	Default Value	Description
width	200	cropper’s width
height	200	cropper’s height
overlayColor	#000	color of background overlay
overlayOpacity	0.7	opacity of background overlay
transparentCorner	false	when set to true, cropper’s controlling corners are rendered as transparent inside
hasRotatingPoint	false	when set to false, cropper’s controlling rotating point will not be visible or selectable
hasControls	true	when set to false, cropper’s controls are not displayed and can not be used to manipulate object
cornerSize	10	size of cropper’s controlling corners (in pixels)
borderColor	#000	color of controlling borders of cropper (when it’s active)
cornerColor	#000	color of controlling corners of the cropper (when it’s active)
cornerStyle	circle	specify style of control, ‘rect’ or ‘circle’

or you can customize your editor crop mode styles by overwriting default values.

 let cropModeOptions = { width: '50', height: '100', overlayOpacity: '0.9'}
 this.$refs.editor.set('crop',cropModeOptions)

If you choose the area which will be cropped,you must call applyCropping() function.

this.$refs.editor.applyCropping()

Function setBackgroundImage(imageUrl)

setBackgroundImage(imageUrl) to set editor background image

data(){
    return{
        imageUrl:"example.png"
     }
},
mounted:{    
    this.$refs.editor.setBackgroundImage(this.imageUrl);
}

Function uploadImage(e)

uploadImage(e) to set background of canvas

 this.$refs.editor.uploadImage(e)

Function saveImage()

saveImage() to save your image,which returns image in base64 format.

 this.$refs.editor.saveImage()

Function clear()

clear() function delete editor’s all objects

 this.$refs.editor.clear()

Function undo()

With the help of undo() function you will be able to remove your last object you have added

 this.$refs.editor.undo()

Function redo()

With the help of redo() method you will be able to restore your last object which have been removed

 this.$refs.editor.redo()

Function getObjectsById(id)

With the help of getObjectsById(id) method you will be able to get object by id

 this.$refs.editor.getObjectsById('title')

Credits

• Lilit Simonyan
• Lionix Team

Download Details:

Author: lionix-team

Demo: https://image-markup.lionix-team.com/

Source Code: https://github.com/lionix-team/vue-image-markup

#vuejs #vue #javascript #vue-js

What is GEEK

Buddha Community

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework.

Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

This framework was created by Evan You and still it is maintained by his private team members. Vue is of course an open-source framework which is based on MVVM concept (Model-view view-Model) and used extensively in building sublime user-interfaces and also considered a prime choice for developing single-page heavy applications.

Released in February 2014, Vue JS has gained 64,828 stars on Github, making it very popular in recent times.

Evan used Angular JS on many operations while working for Google and integrated many features in Vue to cover the flaws of Angular.

“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight." - Evan You

#vuejs #vue #vue-with-laravel #vue-top-story #vue-3 #build-vue-frontend #vue-in-laravel #vue.js

Client-side Image Editing In Vue – Image Markup

Markup Image with Vue.js (customizable)

vue-image-markup will provide you to edit uploaded image easily and save it.

Installation

npm i vue-image-markup

or

yarn add vue-image-markup

Usage

First import the Editor component inside your Vue component.

 import Editor from 'vue-image-markup';

Then you’ll be able to use Editor component.

Example:

You must give your editor component ref,which will help you to call the functions to set editor mode,clean objects or undo/redo your changes.

<Editor :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" ref="editor" :editorId="1"/>

mounted() {
    $this.$refs.editor.set(this.editor.mode,this.editor.options);
}

canvasWidth prop will set editor width

canvasHeight prop will set editor height

ref with the help of ref, you will control the editor

editorId (optional) will set editor id, allowing the use of multiple editors in the same component

Function set(type,params)

With the set() function you choose editor’s mode,which should get two parameters type and params

Editor have 6 modes

• text
• circle
• rect
• selectMode
• arrow
• freeDrawing
• crop

params parameter must be an object which set the type and every type have it’s own options.

Text Mode

set('text',params) to enable text mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('text')

Object key	Default Value	Description
fill	black	color
fontFamily	Arial	font-family
fontSize	32	font-size
fontWeight	100	font-weight(100,200,300,400,500,600,700,bold,normal)
fontStyle	normal	font-style(normal,italic,oblique)
placeholder	Add Text	default text placeholder when the text will be added
id	''	text id

or you can customize your editor text mode styles by overwriting default values.

 let textModeOptions = { id: 'title', fill: 'red', fontFamily: 'Verdana',fontSize: 16, placeholder: 'Type something'}
 this.$refs.editor.set('text',textModeOptions)

Circle Mode

set('circle',params) to enable circle mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('circle')

Object key	Default Value	Description
fill	transparent	Color inside circle
stroke	black	Circe border color
strokeWidth	7	Circle border width
disableCircleEditing	false	When false, can be painted custom circle. When true, always will be added circle of fixed height and width
top	0	Top position of an object
left	0	Left position of an object
radius	20	Radius of the circle
strokeUniform	true	When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
noScaleCache	false	When true, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
id	''	Circle id

or you can customize your editor circle mode styles by overwriting default values.

 let circleModeParams = { fill: 'blue',stroke: 'white' }
 this.$refs.editor.set('circle',circleModeParams)

Rectangle Mode

set('rect',params) to enable rect mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('rect')

Object key	Default Value	Description
fill	transparent	Color inside rectangle
stroke	black	Rectangle is rendered via stroke and this property specifies its color
strokeWidth	7	Rectangle border width
angle	0	Angle of rotation of an object (in degrees)
width	0	if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties
height	0	if rectangle width and height is not 0,editor disable editing rectangle and add the rectangles with fixed properties
top	0	Top position of rectangle
left	0	Left position of rectangle
opacity	1	Opacity of rectangle
strokeUniform	true	When false, the stoke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
noScaleCache	false	When true, cache does not get updated during scaling. The picture will get block if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
id	''	Rectangle id
or you can customize your editor rectangle mode styles by overwriting default values.

 let customizeRectangle = { fill: 'blue',stroke: 'white',strokeWidth: "5" }
 this.$refs.editor.set('rect',customizeRectangle)

Select Mode

set('selectMode') to enable select mode in editor. This mode disable all other types editing and enable select mode for user can move,resize or rotate selected object.This function hasn’t params parameter

this.$refs.editor.set('selectMode')

Arrow Mode

set('arrow',params) to enable arrow mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('arrow')

Object key	Default Value	Description
stroke	black	Arrow is rendered via stroke and this property specifies its color
strokeWidth	7	Arrow border width
strokeUniform	true	When false, the stroke width will scale with the object. When true, the stroke will always match the exact pixel size entered for stroke width
noScaleCache	false	When true, cache does not get updated during scaling. The picture will get blocky if scaled too much and will be redrawn with correct details at the end of scaling. this setting is performance and application dependant
id	''	Arrow id
or you can customize your editor’s arrow mode styles by overwriting default values.

 let customizeArrow = { stroke: 'red',strokeWidth: "3" }
 this.$refs.editor.set('arrow',customizeArrow)

Free Drawing Mode

set('freeDrawing',params) to enable free drawing mode in editor,where params must be object and has it’s default value

this.$refs.editor.set('freeDrawing')

Object key	Default Value	Description
stroke	black	brush’s color
strokeWidth	7	brush’s width

or you can customize your editor’s free drawing mode styles by overwriting default values.

 let customizeFreeDrawing = { stroke: 'yellow',strokeWidth: "5" }
 this.$refs.editor.set('freeDrawing',customizeFreeDrawing)

Crop Mode

set('crop') to enable crop mode in editor,where params must be cropper’s parameters and has it’s default value. After calling the function, the cropper will be shown in editor.

this.$refs.editor.set('crop',params)  

Object key	Default Value	Description
width	200	cropper’s width
height	200	cropper’s height
overlayColor	#000	color of background overlay
overlayOpacity	0.7	opacity of background overlay
transparentCorner	false	when set to true, cropper’s controlling corners are rendered as transparent inside
hasRotatingPoint	false	when set to false, cropper’s controlling rotating point will not be visible or selectable
hasControls	true	when set to false, cropper’s controls are not displayed and can not be used to manipulate object
cornerSize	10	size of cropper’s controlling corners (in pixels)
borderColor	#000	color of controlling borders of cropper (when it’s active)
cornerColor	#000	color of controlling corners of the cropper (when it’s active)
cornerStyle	circle	specify style of control, ‘rect’ or ‘circle’

or you can customize your editor crop mode styles by overwriting default values.

 let cropModeOptions = { width: '50', height: '100', overlayOpacity: '0.9'}
 this.$refs.editor.set('crop',cropModeOptions)

If you choose the area which will be cropped,you must call applyCropping() function.

this.$refs.editor.applyCropping()

Function setBackgroundImage(imageUrl)

setBackgroundImage(imageUrl) to set editor background image

data(){
    return{
        imageUrl:"example.png"
     }
},
mounted:{    
    this.$refs.editor.setBackgroundImage(this.imageUrl);
}

Function uploadImage(e)

uploadImage(e) to set background of canvas

 this.$refs.editor.uploadImage(e)

Function saveImage()

saveImage() to save your image,which returns image in base64 format.

 this.$refs.editor.saveImage()

Function clear()

clear() function delete editor’s all objects

 this.$refs.editor.clear()

Function undo()

With the help of undo() function you will be able to remove your last object you have added

 this.$refs.editor.undo()

Function redo()

With the help of redo() method you will be able to restore your last object which have been removed

 this.$refs.editor.redo()

Function getObjectsById(id)

With the help of getObjectsById(id) method you will be able to get object by id

 this.$refs.editor.getObjectsById('title')

Credits

• Lilit Simonyan
• Lionix Team

Download Details:

Author: lionix-team

Demo: https://image-markup.lionix-team.com/

Source Code: https://github.com/lionix-team/vue-image-markup

#vuejs #vue #javascript #vue-js

How to through creating a client-side Vue JS app using Vue Router

Vue is a great javascript framework which I picked up to learn a couple of weeks back. I was after a simple framework which I could build an internal tool with and fortunately I came across Vue days after they released version 2. I wanted something quick, simple and (controversially for some) something that came with the ability to be executed client-side. Vue easily takes on the big names of React and Angular and has a easier learning curve for a developer new to the Javascript world of MVC (Model View Controller) apps.

This post will walk you through creating a client-side Vue JS app using Vue Router. Vue Router is a plugin for Vue which allows you to more easily add URLs and other routes to your Vue JS app. This blog assumes you have a basic knowledge of Vue.

At the end of this post, we will have an app which shows a team member list page and team member detail pages, each with their own unique URL

This tutorial uses Vue 2.0.3, Vue Router 2.0.1 and the data has been generated using JSON Generator.

#vue #vue js #vue router

Laravel 7/6 Image Validation

In this image validation in laravel 7/6, i will share with you how validate image and image file mime type like like jpeg, png, bmp, gif, svg, or webp before uploading image into database and server folder in laravel app.

https://www.tutsmake.com/image-validation-in-laravel/

#laravel image validation #image validation in laravel 7 #laravel image size validation #laravel image upload #laravel image validation max #laravel 6 image validation

how to integrate CKEditor in Django

how to integrate CKEditor in Django

Welcome to my Blog, in this article we learn about how to integrate CKEditor in Django and inside this, we enable the image upload button to add an image in the blog from local. When I add a CKEditor first time in my project then it was very difficult for me but now I can easily implement it in my project so you can learn and implement CKEditor in your project easily.

how to integrate CKEditor in Django

#django #add image upload in ckeditor #add image upload option ckeditor #ckeditor image upload #ckeditor image upload from local #how to add ckeditor in django #how to add image upload plugin in ckeditor #how to install ckeditor in django #how to integrate ckeditor in django #image upload in ckeditor #image upload option in ckeditor