Fabricjs: Load svg from local folder - javascript

I need to load 1.svg from a local folder. In the following code, when I replace fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg" with fabric.loadSVGFromURL("1.svg", the image no longer displays in canvas. What am I doing wrong? What is the correct code?
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
var canvas = new fabric.Canvas('canvas');
var group = [];
fabric.loadSVGFromURL("http://fabricjs.com/assets/1.svg",function(objects,options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: 100,
top: 100,
width:175,
height:175
});
canvas.add(loadedObjects);
canvas.renderAll();
},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="900" height="900"></canvas>
</body>
</html>

Chrome's security model doesn't allow it. You can run with the command line option --allow-file-access-from-files to override this.

Is this file hosted on a server ? If its not, once you host the html file in a server it will display the svg image. The svg file need to be in the same folder under the website where you place the html file.

Related

How to make p5.speech work in electron application for speech to text?

I have created a smaple electron application to try p5.speech. But that is not working and I am not seeing any error in console.
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello p5.js!</title>
<script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
<script language="javascript" src="libraries/p5.dom.js"></script>
<script language="javascript" src="libraries/p5.sound.js"></script>
<script language="javascript" src="libraries/p5.speech.js"></script>
<script language="javascript" type="text/javascript" src="my_speech.js"></script>
<!-- this line removes any default padding and style. you might only need one of these values set. -->
<style> body {padding: 0; margin: 0; background: #000000; overflow-x:hidden; overflow-y: hidden} </style>
</head>
<body>
</body>
<script>
// You can also require other files to run in this process
require('../renderer.js')
</script>
</html>
my_speech.js
function setup() {
noCanvas();
let lang = navigator.language || 'en-US';
let speechRec = new p5.SpeechRec(lang, gotSpeech);
let continuous = true;
let interim = false;
speechRec.start(continuous, interim);
function gotSpeech() {
console.log(speechRec);
if (speechRec.resultValue) {
createP(speechRec.resultString);
}
}
}
This setup is working fine in browser. How can I make it work in electron application?

How to build a Parallax Scroller with Pixi.js

I'm having a problem with the pixi.js "Building a Parallax Scroller with Pixi.js: Part 1" tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallax Scrolling Demo</title>
<style>
body { background-color: #000000; }
canvas { background-color: #222222;}
</style>
</head>
<body onload="init();">
<div align= "center">
<canvas id= "game-canvas" width= "512" height="384"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.0.0/pixi.min.js" ></script>
<script>
function init() {
stage = new PIXI.Container();
renderer = PIXI.autoDetectRenderer(512,384, {view:document.getElementById("game-canvas")});
var farTexture = PIXI.Texture.fromImage("resources/bg-far.png");
far = new PIXI.Sprite(farTexture);
far.position.x = 0;
far.position.y = 0;
stage.addChild(far)S
renderer.render(stage);
}
</script>
</body>
</html>
I can't get my images to render.
When constructing files in Microsoft, it is important to go back into Properties-->Security and make sure your permission settings match (for each file).
Additionally, in order to avoid a CORS error it is also important to use Administration settings; Specifically settings in the IIS or Internet Information Services.
Here, you will need to examine and adjust your permission settings.

How to output result of codemirror in iframe?

I am trying to make a HTML code player in which you enter html and get result in iframe. it works good if i only use textarea and output in iframe. but if i use code mirror and try putting coremirror value into iframe it shows me code in iframe instead of showing me result.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="codemirror/codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="codemirror/codemirror/theme/neo.css">
<script src="codemirror/codemirror/mode/javascript/javascript.js"></script>
<script src="codemirror/codemirror/mode/css/css.js"></script>
<script src="codemirror/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="codemirror/codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/codemirror/addon/hint/css-hint.js"></script>
<link rel="stylesheet" href="codemirror/codemirror/addon/hint/show-hint.css">
<style>
body {
background-color: #eee;
}
iframe{height:600px;width:400px}
</style>
</head>
<body>
<div id="codeeditor"></div>
<iframe>Example</iframe>
<button>RUN</button>
<script>
var editor = CodeMirror(document.getElementById("codeeditor"), {
value: "<html><body><h1>Helloworld</h1></body></html>",
mode: "css",
theme: "neo",
extraKeys: {"Ctrl-Space": "autocomplete"}
});
$("button").click(function(){
$("iframe").contents().find("body").html($("#codeeditor").html());
})
</script>
</body>
</html>
Do not take editor contents using jQuery, instead use codemirror method getValue like this:
$("button").click(function(){
$("iframe").contents().find("body").html(editor.getValue());
})

Clip to shape of image in fabric js

I was trying to implement like similar website.
http://printio.ru/full_print_tees/new
Even i tried answer of following post but it is not working.Does any one have the solution or fiddle.
Fabric.js Clip Canvas (or object group) To Polygon
I have create following example but it is not working similar. Please let me know what is problem
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border: 1px solid red; }
</style>
<script>
$(function(){
var canvas = new fabric.Canvas('canvas');
var group = [];
fabric.loadSVGFromURL("http://fabricjs.com/assets/2.svg",function(objects,options) {
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
left: 100,
top: 100
});
canvas.add(loadedObjects);
shape = canvas.item(0);
canvas.remove(shape);
canvas.clipTo = function(ctx) {
shape.render(ctx);
};
canvas.renderAll();
},function(item, object) {
object.set('id',item.getAttribute('id'));
group.push(object);
});
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Hello are you looking something like this on my example?
load one image (t-shirt)
add i-text object
manipulate text object (edit,move up/down/left/right) on the t-shirt
small snippet:
fabric.Image.fromURL(myImg, function(myImg) {
var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });
var text = new fabric.Text('the_text_sample\nand more', {
fontFamily: 'Arial',
fontSize:20,
});
text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
text.set("left",myImg.width*scaleFactor/2-text.width/2);
var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});
live example : https://jsfiddle.net/tornado1979/zrazuhcq/
Hope helps,good luck.

How Create two or more rectangles in on space of canvas proportionally?

guys!
I have a problem.
I want create on, two or more rectangles in a space proportionally.
So, a have the canvas in 600x800px and I have a rectangle in 200x400px, I need when I click in a button, create more one rectangle in the some space of other. staying, 100x200 and 100x200 for both rectangles.
Some one?
Thanks!
All you have to do is:
Keep a Y-coordinate variable,
Draw your next rectangle at that Y,
Increment Y by the rectangle height (plus any spacing between rects that you desire)
Here's code and a Demo: http://jsfiddle.net/m1erickson/czMXH/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var y=10;
var spacer=8;
$("#again").click(function(){
ctx.fillStyle=randomColor();
ctx.fillRect(10,y,100,66);
ctx.strokeStyle="black";
ctx.strokeRect(10,y,100,66);
y+=66+spacer;
});
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="again">Add</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Categories