alert('click apply to add text and rectangle');
$(document).ready(function() {
});
function createCustomComments() {
try {
var selText = $('#txtCustomComments').val();
var color = new fabric.Color(colorPicker.val()).toRgb();
var fontSize = fontPicker.val();
commentText = new fabric.IText(selText, {
fontSize: fontSize,
hasControls: false,
hasBorders: true,
originX: 'center',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: color,
//opacity: 0.6,
fill: color,
fontFamily: "helvetica"
});
var commentRectange = new fabric.Rect({
originX: 'center',
top: 30,
width: 300,
height: 200,
fill: 'rgba(0,0,0,0)',
stroke: color,
strokeWidth: 4
});
var group = new fabric.Group([commentText, commentRectange], {
left: 100,
top: 150
});
canvas.add(group);
canvas.bringForward(group);
} catch (exception) {
console.log(exception);
}
}
$('#btnApplyComments').on('click', function() {
createCustomComments();
});
$('#btnSave').on('click', function() {
SaveResultImage();
});
$('#getjson').on('click', function() {
getfabricJsonToText();
});
var commentRectange, commentText;
var canvas = new fabric.Canvas('wmcCanvas', {
selection: true
});
var colorPicker = $('#btnColor');
var fontPicker = $('#bntfontsize');
var image = new Image();
var imageComp;
image.crossOrigin = "Anonymous";
image.onload = function() {
// the url is sub domain the image below is dummy
imageComp = fabric.Image.fromURL('https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', function(img) {
var oImg = img.set({
angle: 0,
cornersize: 10,
hoverCursor: "default",
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
hasRotatingPoint: true,
hasControls: false,
hasBorders: false,
lockScalingFlip: true,
lockScalingX: true,
lockScalingY: true,
lockSkewingX: true,
lockSkewingY: true,
height: image.naturalHeight,
width: image.naturalWidth
});
canvas.add(oImg);
canvas.moveTo(oImg, window.objectIndex);
}, { crossOrigin: 'Anonymous' });
canvas.setHeight(image.naturalHeight);
canvas.setWidth(image.naturalWidth);
};
image.src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg";
function SaveResultImage() {
canvas.deactivateAll().renderAll();
var base64String = canvas.toDataURL("image/jpg");
//var base64String = canvas.toSVG();
//base64String = base64String.replace(/^data:image\/(png|jpg);base64,/, "");
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
} else {
\t console.debug(base64String);
// save image
}
}
.wmc_main {
width: 420px;
background: #F7F7F7;
height: 75px;
margin: 0 auto;
padding: 10px 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
border-bottom: 5px solid #e3e3e3;
padding-bottom: 8px;
}
.wmc_main span {
color: #585858;
}
.main-dropdown form {
width: 244px;
float: left;
}
.main-dropdown form select.pls-select {
height: 30px;
width: 230px;
border: 1px solid #dadada;
color: #6b6b6b;
padding: 0 10px;
}
.showhideCustomComment {
width: 100%;
float: left;
}
.comment-dropdown input.pls-select-comments {
height: 27px;
width: 210px;
border: 1px solid #dadada;
padding: 0 10px;
color: #6b6b6b;
}
.comment-dropdown.showhideCustomComment {
width: 100%;
padding-bottom: 10px;
}
.showhideCustomComment span {
width: 126px !important;
}
.comment-apply-btn {
height: 30px;
padding: 0 5px 0 5px;
background: #05b5ef;
border: none;
color: #fff;
line-height: 30px;
margin-left: 0px;
margin-top: 2px;
}
.wmc_main .main-dropdown span,
.wmc_main .comment-dropdown span {
width: 126px;
float: left;
line-height: 30px;
color: #05b5ef;
}
.wmc_main .main-dropdown {
margin-bottom: 8px;
width: 100%;
float: left;
}
.wmc_main .color-picker {
width: 182px;
float: left;
}
.color-picker span {
float: left;
line-height: 26px;
width: 126px;
}
.color-box {
width: 16px;
height: 14px;
background: #ff0c0c;
border: 6px solid #ebebeb;
float: left;
}
.comment-dropdown {
/* width: 100px; margin-bottom: 8px; padding-top: 8px; */
width: 105px;
float: left;
padding-top: 0;
}
input.wmc-font-size {
width: 32px;
padding: 0 0 0 4px;
height: 24px;
border: 1px solid #ebebeb;
}
input.wmc-font-color {
width: 28px;
height: 24px;
border: 1px solid #ebebeb;
padding: 3px;
}
.main-font-size {
margin: 0 8px 0 0;
width: 125px;
float: left;
display: block;
}
.font-setting {
width: 100%;
float: left;
/* padding: 0 0 0 36px;*/
}
.main-font-size span {
line-height: 26px;
float: left;
margin-right: 5px;
width: 68px;
}
.show-setting {
width: 92%;
float: left;
margin-bottom: 10px;
}
.show-setting span {
color: #575757;
}
.show-setting span img {
padding-left: 10px;
}
.color-picker span {
color: #575757;
}
.setting-btn:hover {
background: #77b800;
}
.setting-btn {
background: #8fd400 none repeat scroll 0 0;
border: 0 none;
color: #fff;
font-size: 14px;
font-weight: bold;
height: 35px;
margin-left: 2px;
padding: 0;
text-transform: uppercase;
width: 130px;
}
.share-post-history .dialogshare {
width: 228px;
}
.canvas-container {
margin-top: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<div class="wmc_main" style="display: flex;">
<div class="main-dropdown">
<span>Select comments:</span>
<input id="txtCustomComments" name="Comment" value="dummy text" placeholder="Custom comments here" class="pls-select-comments" type="text">
<button name="btn-apply" id="btnApplyComments" value="apply" class="comment-apply-btn">
Apply</button>
</div>
<div class="font-setting">
<div class="color-picker">
<span>Font Color:</span>
<input id="btnColor" class="wmc-font-color" name="favcolor" value="#FF0000" type="color">
</div>
<div class="main-font-size">
<span>Font Size:</span>
<input id="bntfontsize" class="wmc-font-size" min="6" max="72" step="2" value="20" type="number">
</div>
<div class="comment-dropdown">
<span></span>
<input id="btnSave" value="Save" class="comment-apply-btn" type="button">
<input value="Reset" onclick="reset()" class="comment-apply-btn" type="button">
</div>
</div>
<canvas id="wmcCanvas">Your browser does not support the canvas element.</canvas>
</div>
