i create a canvas, i add a fabric Itext, i want to fill text of textbox in Itext.
my html code is...
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>
and javascript...
function Addtext() {
var text = new fabric.IText('Enter text here...', {fontSize:16,left:20,top:20,radius:10});
borderRadius = "25px";
canvas.add(text).setActiveObject(text);
text.hasRotatingPoint = true;
}
document.getElementById('title').addEventListener('keyup', function () {
var stringTitle = document.getElementById('title').value;
});
please help...thanks in advance.
Your question is very vague. this seems to be something close to what you are asking for. As you type in the textbox the iText updates. Although you can just click in to the iText on the canvas and type right in to so I'm not sure if you really need the html input at all.
window.canvas = new fabric.Canvas('c');
var textOptions = {
fontSize:16,
left:20,
top:20,
radius:10,
borderRadius: '25px',
hasRotatingPoint: true
};
var textObject = new fabric.IText('Enter text here...', textOptions);
canvas.add(textObject).setActiveObject(textObject);
canvas.renderAll()
document.getElementById('title').addEventListener('keyup', function () {
textObject.text = document.getElementById('title').value;
canvas.renderAll();
});
canvas { border: 1px solid; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js" ></script>
<input type="text" id="title" placeholder="Your Title" /><br>
<canvas id="c"></canvas>
Related
How can we exactly get and set the underline, overline etc. properties now for text, iText and Textbox in the 2.x beta? Is there some documentation available?
var canvas = new fabric.Canvas('canvas');
var text = new fabric.Text('FabricJS is Awsome.',{
fontSize:'30',
left:50,
top:50,
underline:true
});
canvas.add(text);
//text.setSelectionStyles({overline:true},0,5);
canvas.renderAll();
function changeStyle(val){
text[val] = !text[val];
text.dirty = true;
canvas.renderAll();
}
canvas {
border: 2px dotted green;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick=changeStyle('underline')>underline</button>
<button onclick=changeStyle('overline')>overline</button>
<button onclick=changeStyle('linethrough')>linethrough</button><br>
<canvas id="canvas" width="400" height="400"></canvas>
Same as other property set/get from object. fabric.Text
the function of color picker is not getting into desired field
<input class="jscolor {onFineChange:'update(this)'}" value="choose color">
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;">
<script type="javascript" src="js/jscolor.js"></script>
<script>
function update(jscolor) {
// 'jscolor' instance can be used as a string
document.getElementById('richTextField').style.backgroundColor = '#' + jscolor
}
</script>
i want that when a user clicks on the text field the color picker will open user select his desire color and then the text written in the iframe should be of that color
Just fixed this for you.This example demonstrates changing background. To change text color, you can define iframe source and replace "y.body.style.backgroundColor = '#' + jscolor;" with "y.body.style.color = '#' + jscolor;" .Here's the snippet code:
<script src="http://jscolor.com/release/2.0/jscolor-2.0.4/jscolor.js"></script>
<input class="jscolor {onFineChange:'update(this)'}" value="choose color">
<iframe id="richTextField" height="200" width="600"></iframe>
<script>
function update(jscolor) {
var x = document.getElementById("richTextField");
var y = (x.contentWindow || x.contentDocument);
if (y.document)y = y.document;
y.body.style.backgroundColor = '#' + jscolor;
}
</script>
View Snippet
I am using fengyuanchen jQuery cropper
I have the cropper set to be responsive. This means that the displayed width/height of the image being cropped may not be the true native width/height. I need to get the displayed width/height so that I can calculate where to crop the original full-size image when applicable.
I read this example in the docs:
var imageData = $().cropper('getImageData');
However, console.log(imageData); returns this:
> n.fn.init {}
> __proto__ : Object[0]
/* Inside this is every custom defined js function */
If anyone has experience with this it would be a major help.
For anyone else with this issue:
I'm currently just grabbing the .width() of the .cropper-canvas object like this, but I would still appreciate if someone knew how to use the method properly.
var cropperCanvas = $('.cropper-canvas');
console.log('Width: '+cropperCanvas.width()+"\nHeight:"+cropperCanvas.height());
To access this information you must call these methods inside the 'built' function. Like so:
var $crop = $('.img');
$crop.cropper({
built: function() {
var canvasData = $crop.cropper('getCanvasData');
var cropBoxData = $crop.cropper('getCropBoxData');
var imageData = $crop.cropper('getImageData');
$('.cd').text('Canvas Data: ' + JSON.stringify(canvasData));
$('.cb').text('CropBox Data: ' + JSON.stringify(cropBoxData));
$('.id').text('Image Data: ' + JSON.stringify(imageData));
}
});
.container {
max-width: 800px;
}
.container .img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js"></script>
<div class="container">
<img class="img" src="http://www.beijingiphonerepair.com/wp-content/uploads/2011/10/iphone4s_sample_photo_1.jpg" alt="">
</div>
<p class="cd"></p>
<p class="cb"></p>
<p class="id"></p>
It's a simple example just to show you the idea. Hope it helps.
Was having the same issues, not much help anywhere. Pieced together a solution from various places. Documentation/real-world examples of this plugin are sadly lacking, yet it's probably the best cropper script I've used
The form:
<div class="cropperOriginal">
<img id="image" src="/yourimage.jpg">
</div>
<form method="POST" action="test.php">
X: <input type="text" name="dataX" id="dataX" placeholder="X" value="" />
Y: <input type="text" name="dataY" id="dataY" placeholder="Y" value="" />
W: <input type="text" name="dataWidth" id="dataWidth" placeholder="width" value="" />
H: <input type="text" name="dataHeight" id="dataHeight" placeholder="height" value="" />
<input type="submit" />
</form>
<div class="img-preview"></div>
The javascript
<script>
window.addEventListener('DOMContentLoaded', function () {
var ele = $("#image");
var dataX = document.getElementById('dataX');
var dataY = document.getElementById('dataY');
var dataHeight = document.getElementById('dataHeight');
var dataWidth = document.getElementById('dataWidth');
ele.cropper({
aspectRatio: 4 / 3,
preview: '.img-preview',
crop: function (e) {
var imageData = ele.cropper('getData');
dataX.value = Math.round(imageData.left);
dataY.value = Math.round(imageData.top);
dataHeight.value = Math.round(imageData.height);
dataWidth.value = Math.round(imageData.width);
},
zoomable: false,
scalable: false,
movable: false,
background: true,
viewMode: 2
});
});
</script>
Hope this helps someone
I want to add multiple text on my canvas using click of a button but as i click the button again it reload s the canvas and as loaded my first text again here is my code....is there any better way to do it.???
function text()
{
var m,n;
m=150;
n=60;
var tex=document.getElementById("tex");
var tex1=document.getElementById("tex1");
var te=tex.value;
var te1=tex1.value;
var canvas=new fabric.Canvas('can');
var text=new fabric.Text( te ,{
top: m,
left: n
});
canvas.add(text);
}
function text2()
{
var m,n;
m=150;
n=60;
var tex1=document.getElementById("tex1");
var te1=tex1.value;
var canvas=new fabric.Canvas('can');
var text1=new fabric.Text( te1 ,{
top: m,
left: n
});
canvas.add(text1);
}
finally i got it i dont know where i was making mistake but finally this code of piece is working for me but still can any body tell me my mistake
<script>
$(document).ready(function(e) {
var can=new fabric.Canvas('can');
$("#d").click(function(e) {
rect=new fabric.Text('New Text',{
top:Math.floor(Math.random()*350+1),
left:Math.floor(Math.random()*250+1),
fill:'red'
});
can.add(rect);
});
});
</script>
<body>
<canvas id="can" width="700" height="500" style=" border:0.2em solid #000;" > </canvas>
<div class="controls">
<button id="d" onclick="text()">ADD TEXT</button>
</div>
I am trying to display a text on a canvas by entering a message in a textbox but it's not appearing.
Here is my code:
<html>
<body>
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button onclick="clicked()">Submit</button>
<script type="text/javascript">
function clicked () {
var x = document.getElementById("form_val");
return x.value;
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "25px Verdana";
ctx.fillText(clicked(), 250, 250);
</script>
</body>
</html>
The code outside of your function is triggered immediately, put it inside the function so it's called when it needs to be (as it currently stands, it calls nothing. And when you click the button, it's returning the input value to the onclick method. Try this instead:
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
HTML:
<canvas id="myCanvas" width="600" height="400"></canvas>
<input type="text" name="fname" size="50" id="form_val">
<button id='submit'>Submit</button>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
document.getElementById('submit').addEventListener('click', clicked);
function clicked(){
var x=document.getElementById("form_val");
// Create the text when the button is clicked
ctx.fillText(x.value,250,250);
}
Fiddle.
I believe you want to do something like this
<script type="text/javascript">
function clicked(){
var x=document.getElementById("form_val");
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="25px Verdana";
ctx.fillText(x.value,250,250);
}
With this, the text will be filled when clicking the button. Note: I haven't tested the code, but you might get the picture