I have seen in a couple of cases of converting text into images but nobody mention that if a text is too long i-e more then 1000 words how can I display them in image with using a font size of 15px
my HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
</head>
<body>
<div id="the_text"></div>
<button id="show_img_btn">Convert to Image</button>
<div id="show_img_here"></div>
</body>
my Script code
window.onload=function(){
$("#show_img_btn").on("click", function () {
var canvas = document.createElement("canvas");
canvas.width = 620;
canvas.height = 80;
var ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
var text = $("#the_text").text();
ctx.fillText(text,10,50);
var img = document.createElement("img");
img.src=canvas.toDataURL();
$("#show_img_here").append(img);
//$("body").append(canvas);
});
};
My question is if I convert this image it will converted into one line help me how can i convert the whole text into image and set the height and width.
Create a dummy element and apply same style props, append to dom and get the with of it. based on that you can split the text. Helpful snippet given below.
// JS:
function getDimen(text) {
var div = document.getElementById("dummy");
div.innerHTML = text
var h = (div.clientHeight + 1) + "px";
var w = (div.clientWidth + 1) + "px"
return({ h, w })
}
console.log(getDimen("some text hi a a s a a s as a s as a s as a s as a s"))
// HTML
<div id="dummy"></div>
// CSS:
#dummy {
position: absolute;
visibility: hidden;
height: auto;
width: auto;
white-space: nowrap;
}
Related
In Font Awesome 4x I managed to set the cursor as an icon by changing it into a base-64 image url. Now in Font Awesome 5 it does not work any more.
I've found this solution, but it's not working here.
This is what I've tried.
var canvas = document.createElement("canvas");
canvas.width = 20;
canvas.height = 20;
var ctx = canvas.getContext("2d");
document.fonts.ready.then(function() {
ctx.font = "400 20px Font Awesome 5 Pro";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
setTimeout(function() {
ctx.fillText("\uf2ed", 10, 10)
var dataURL = canvas.toDataURL('image/png')
$('#foo').css('cursor', 'url(' + dataURL + '), auto');
}, 200)
})
All I get is a black square 20x20
Is there anyone who knows how to get it done?
see the below example ...
var hex = 0xF25A;
var unicode = String.fromCharCode(parseInt(hex, 16));
var canvas = document.getElementById("cache");
canvas.width = 64; canvas.height = 64;
var context = canvas.getContext("2d");
context.font = '900 32px "Font Awesome 5 Free"';
context.fillText(unicode, canvas.width/2, canvas.width/2);
document.fonts.ready.then(function() {
$('body').css('cursor', 'url(' + canvas.toDataURL('image/png') + '), auto');
});
html, body {height: 100%; width:100%; margin:0; padding: 0;}
canvas#cache {display: none;}
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="cache"/>
This is an old question, but I was successful using jquery.awesomecursor, and this JS:
$('body').awesomeCursor('cut', {color: '#3097d1',
font: {cssClass: 'far fa-%s',
family:'"Font Awesome 5 Pro"'
}
});
The key things here were:
. The cssClass for FontAwesome 5 ("regular" icons are 'far fa-X', not 'fa fa-X' as they were in prior versions)
. The way "family" is specified - I needed the inner set of quotes to make it work.
FWIW, I'm using this with WebPack so I needed to make sure faCut was loaded from "#fortawesome/pro-regular-svg-icons"; You can read more about this here.
I have to create a data set for a project I am doing. The task seems simple, I have to a create hundreds of screen shots of a GUI with one button taking a random position every time the code is run and save the image along with its CSS code. The css code should have the position of the button.
I can take the screen shot and save it with the button appearing on random location on the screen, but I am at a fail to save the CSS with location on the GUI.
I am using math random function to change the button location. Here is some code snippet.
<style>
#container
{
width:400px;
height:400px;
background-color:red;
}
#btn
{
position: absolute;
color: black;
width: 120px;
height: 30px;
}
</style>
<div id="container">
<button id="btn">Click Me!</button>
</div>
Javascript code to pass random number to button position:
<script>
var btn = document.getElementById("btn");
btn.style.top = Math.floor((Math.random() * 200) + 1) + "px";
btn.style.left = Math.floor((Math.random() * 200) + 1) + "px";
</script>
Saving a screenshot:
<script type="text/javascript">
//window.onload = function () {
var takeScreenShot = function () {
html2canvas(document.getElementById("container"), {
onrendered: function (canvas) {
var tempcanvas = document.getElementById("myCanvas");
var context = tempcanvas.getContext('2d');
context.drawImage(canvas, 0, 0, 400, 400, 0, 0, 400, 400);
var png = ReImg.fromCanvas(document.getElementById('myCanvas')).toPng();
var link = document.createElement("a");
link.href = tempcanvas.toDataURL('image/png');
link.download = 'screenshot.png';
link.click();
}
});
}
var myVar = setInterval(takeScreenShot, 5000);
</script>
We currently upload an image via the below code:
reader.onload = function (event) {
fabric.Image.fromURL(event.target.result, function (img) {
whiteboardService.uploadImageToCanvas(img);
});
}
and...
service.uploadImageToCanvas = function (image) {
service.canvas.add(image);
image.id = service.getUniqueId();
service.objectMap[image.id] = image;
var data = {
image: image,
id: image.id
};
signalService.sendMessage(service.recipient, data);
};
If the image is too large, bigger than our fixed width and height of the canvas would it be possible for that image to be scaled down automatically to fit into the fixed width and height of the canvas?
I should point out that I am using Angular.js as well
ta
fabricjs put a very simple method to do this.
Those methods are scaleToWidth and scaleToHeight that are close to 'apply a scale factor that will fit the image on the specified dimensions'
So you can do
image.scaleToWidth(service.canvas.getWidth());
service.canvas.add(image);
it depends if you want to preserve aspect ratio if you have to scale for the biggest, the smallest or both.
Inspired by #AndreaBogazzi, I wrote below code to fit image to canvas totally.
var canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('https://d32ogoqmya1dw8.cloudfront.net/images/NAGTWorkshops/structure/SGT2012/activities/noaa_global_topographic_map.jpg', function(oImg) {
let imgWidth = oImg.width;
let imgHeight = oImg.height;
let canvasWidth = canvas.getWidth();
let canvasHeight = canvas.getHeight();
let imgRatio = imgWidth / imgHeight;
let canvasRatio = canvasWidth / canvasHeight;
if(imgRatio <= canvasRatio){
if(imgHeight> canvasHeight){
oImg.scaleToHeight(canvasHeight);
}
}else{
if(imgWidth> canvasWidth){
oImg.scaleToWidth(canvasWidth);
}
}
canvas.clear();
canvas.add(oImg);
canvas.centerObject(oImg);
});
.image-preview{
border: solid 1px #979797;
width: 200px;
height: 200px;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
<div class="image-preview">
<canvas id="canvas" width='200' height='200'></canvas>
<hr/>
<p>Origin Image</p>
<img src="https://d32ogoqmya1dw8.cloudfront.net/images/NAGTWorkshops/structure/SGT2012/activities/noaa_global_topographic_map.jpg" />
</div>
I'm trying to put smile images at random positions on the left side div.But the images are not appearing in random order , rather it is showing images serially. Why is this happening?
<html>
<head>
<h1>Matching Game</h1>
<p>Click on the extra smiling face on the left</p>
<div id= "leftSide"></div>
<div id = "rightSide"></div>
<style>
img1 {position:absolute}
div {position:absolute; width:500px;height: 500px}
#rightSide {left:500px;border-left: 1px solid black}
</style>
<script>
var numberOfFaces =5,i;
var theLeftSide = document.getElementById("leftSide");
function generateFaces()
{
for( i=0;i<numberOfFaces;i++)
{
var img1 =document.createElement("img");
img1.src = "smile.png";
var topran = Math.random() * 400;
var topran = Math.floor(topran);
var leftran = Math.random() *400;
var leftran = Math.floor(leftran);
img1.style.top = topran + "px";
img1.style.left = leftran + "px";
theLeftSide.appendChild(img1);
}
}
</script>
</head>
<body onload = "generateFaces()">
</body>
</html>
You can't style your smile image with img1 {position:absolute} in your CSS. Change your CSS to .smile {position:absolute} (a class selector) and set the class smile on img1.
var img1 =document.createElement("img");
img1.src = "smile.png";
img1.className = "smile";
img1 is not a valid CSS selector. Change it to just img or #leftSide img
I need to get the color of any pixel my mousepointer is currently hovering.
I found several solutions for canvas elements, but none for a background image defined in CSS for a element.
How can I achieve this?
Combining the answers from Get a CSS value with JavaScript and How to get a pixel's x,y coordinate color from an image?, I was able to simulate what you are looking for: JSFiddle
<html>
<head>
<style type="text/css">
#test {
background-image: url('http://jsfiddle.net/img/logo.png');
background-color: blue;
background-repeat: no-repeat;
height: 30px;
width: 100%;
}
#hidden {
display: none;
}
</style>
<script type="text/javascript">
var div = document.getElementById("test");
var style = window.getComputedStyle(div);
div.onmousemove = function(e) {
var path = style.getPropertyValue('background-image');
path = path.substring(4, path.length-1);
var img = document.getElementById("i1");
img.src = path;
var canvas = document.getElementById("c1");
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
var pixelData = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
var values = document.getElementById("values");
values.innerHTML = 'R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3];
};
</script>
</head>
<body>
<div id="test"></div>
<div id="hidden">
<img id="i1" src="" />
<canvas id="c1"></canvas>
</div>
<div id="values"></div>
</body>
</html>
I retrieved the computed style (var style = window.getComputedStyle(div);) outside of the mouse move function for performance reasons, but if the background image is going to change dynamically, then it may need to be moved into the function.
There are some possible browser constraints for using getComputedStyle.
SCALING
You could try editing the code to adjust for the scale:
var h = parseInt(style.getPropertyValue("width")),
w = parseInt(style.getPropertyValue("height"));
var img = document.getElementById("i1");
img.src = path;
var canvas = document.getElementById("c1");
canvas.width = h;
canvas.height = w;
canvas.getContext('2d').drawImage(img, 0, 0, w, h);
This also includes a change to the CSS: JSFiddle