Jump to content
brunomartins

Biblioteca Fabric Javascript

Recommended Posts

Alguém já trabalhou com a biblioteca fabric do javascript?

Alguem sabe me dizer pq esse codigo não esta pegando?

 
<!DOCTYPE>
<html lang ="pt-br">
<head>
<meta charset="utf-8">
<title></title>
<script src="fabric.js" type="text/javascript"></script>
<script src="image_filters.js" type="text/javascript"></script>
<script src="image_filters2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
 <script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js]http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>[/url]
 <script type="text/javascript" src="[url=http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js]http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>[/url]
 <script src="jcanvas.js"></script>
 <script src="jquery.js"></script>
 <script type="text/javascript" src="[url=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js]https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>[/url]
</head>
<body>
<p>Teste</p>
<br/>
<canvas id="c"></canvas>
  <img src="Imagem1.png" id ="my-image">
<script>
  var canvas = new fabric.Canvas('c');
  var imgElement = document.getElementById('my-image');
  var imgInstance = new fabric.Image(imgElement, {
  left: 100,
  top: 100,
  angle: 300,
  opacity: 0.85
});
canvas.add(imgInstance);
</script>
</body>
</html> 
Edited by William Bruno
Adicionar code

Share this post


Link to post
Share on other sites

O que aparece no console de erros ?

 

Ctrl + Shift + J no Firefox

Share this post


Link to post
Share on other sites
ele aparece isso...


Este site usa um certificado SHA-1; é recomendado o uso de certificados com os algoritmos da assinatura que usem funções hash mais fortes que SHA-1.[saiba mais] angular.min.js

SyntaxError: missing variable name jquery.js:74:49

TypeError: fabric.Canvas is not a constructor

Share this post


Link to post
Share on other sites

Qual o conteúdo do arquivo jquery.js ?

Qual o conteúdo do arquivo fabric.js ?

 

além disso, você está importando 3 vezes o core do jQuery em versões diferentes.

O erro mostra que ou você não está usando corretamente, mas vamos corrigir os demais erros primeiro.

  • +1 1

Share this post


Link to post
Share on other sites

o conteudo do jquery é essa..

 

/*!
* jQuery JavaScript Library v1.7.2
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Includes Sizzle.js
* Copyright 2011, The Dojo Foundation
* Released under the MIT, BSD, and GPL Licenses.
*
* Date: Wed Mar 21 12:46:34 2012 -0700
*/
(function( window, undefined ) {
// Use the correct document accordingly with window argument (sandbox)
var document = window.document,
navigator = window.navigator,
location = window.location;
var jQuery = (function() {
// Define a local copy of jQuery
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
// A central reference to the root jQuery(document)
rootjQuery,
// A simple way to check for HTML strings or ID strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,
// Check if a string has a non-whitespace character in it
rnotwhite = /\S/,
// Used for trimming whitespace
trimLeft = /^\s+/,
trimRight = /\s+$/,
// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,
// JSON RegExp
rvalidchars = /^[\],:{}\s]*$/,
rvalidescape = /\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,
rvalidtokens = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,
rvalidbraces = /(?:^|:|,)(?:\s*\[)+/g,
// Useragent RegExp
rwebkit = /(webkit)[ \/]([\w.]+)/,
ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,
rmsie = /(msie) ([\w.]+)/,
rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,
// Matches dashed string for camelizing
rdashAlpha = /-([a-z]|[0-9])/ig,
rmsPrefix = /^-ms-/,
// Used by jQuery.camelCase as callback to replace()
fcamelCase = function( all, letter ) {
return ( letter + "" ).toUpperCase();
},
// Keep a UserAgent string for use with jQuery.b
ja a do fabric e muito grande, se quiser lhe passo por email...

Share this post


Link to post
Share on other sites

Use apenas a mais recente, a de número maior.

Deixe assim:

 

<script src="fabric.js" type="text/javascript"></script>

<script src="image_filters.js" type="text/javascript"></script>
<script src="image_filters2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery-1.11.3.js"></script>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 <script src="jcanvas.js"></script>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
E então aperte Ctrl + Shift + J no Firefox e veja o que aparece no console de erros.

Share this post


Link to post
Share on other sites
Ele apareceu isso:


ReferenceError: jQuery is not defined jquery-ui.min.js:10:0

ReferenceError: jQuery is not defined jcanvas.js:6:1

TypeError: fabric.Canvas is not a constructor bibfabric.html:24:15

Erro de segurança: conteúdo em moz-nullprincipal:{06f8ad3d-cadc-47d8-a184-580dd6f9344d} não pode carregar ou ter vínculo com file:///C:/Users/Bruno-DEAD/Documents/estudofabric/Imagem1.png.

Erro de segurança: conteúdo em moz-nullprincipal:{acf73a40-284c-4650-86b9-94cd7ed83c2b} não pode carregar ou ter vínculo com file:///C:/Users/Bruno-DEAD/Documents/estudofabric/Imagem1.png.

Erro de segurança: conteúdo em moz-nullprincipal:{21b6eedc-e544-41f8-affd-ec3847974d3f} não pode carregar ou ter vínculo com file:///C:/Users/Bruno-DEAD/Documents/estudofabric/Imagem1.png.

Share this post


Link to post
Share on other sites

Então deixe assim:

 

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>

<script src="image_filters.js" type="text/javascript"></script>
<script src="image_filters2.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 <script src="jcanvas.js"></script>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>

Share this post


Link to post
Share on other sites

Ele apareceu isso agora...

 

ReferenceError: jQuery is not defined jquery-ui.min.js:10:0
ReferenceError: jQuery is not defined jcanvas.js:6:1
TypeError: fabric.Canvas is not a constructor bibfabric.html:24:15

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Kauê Fucherberger Bonfá
      eu estou tentando fazer um programa que mostra qual produto vale mais a pena mas eu fiz um if falando que quando o preço e a quantidade dos produtos são iguais a frase "os produtos sao iguais" aparece mas por algum motivo o if não está funcionando.
      <div id="produto1"> <div><input type="number" id="preco1" placeholder="preco"></div> <div><input type="number" id="quantidade1" placeholder="quantidade"></div> </div> <div id="produto2"> <div><input type="number" id="preco2" placeholder="preco"></div> <div><input type="number" id="quantidade2" placeholder="quantidade"></div> </div> <div><button onclick="calcular()">calcular</button></div> <div><p>resultado:<a id="resultado"></a></p></div> <script> function calcular() { var q1 = document.getElementById('quantidade1').value var p1 = document.getElementById('preco1').value var q2 = document.getElementById('quantidade2').value var p2 = document.getElementById('preco2').value if (p1 == p2 && q1 == q2) { document.getElementById('resultado').innerText = 'Os produtos são iguais' } } </script> Não coloquei o codigo inteiro mas acho que assim da pra entender
    • By victorhupo
      Eu tenho um código html e quero que a partir de um formulário o javascript modifique o conteúdo dele porem tenho um conhecimento raso.
       o código seria esse.
      <textarea> <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="901" data-original-width="1600" src="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" /></a></div> </textarea> eu preciso que a partir do link q o usuário colocar no formulário ele substitua esse link de imagem pelo que foi colocado na tabela. alguém tem alguma solução?
    • By geivisonsales
      Tenho um site sobre conteudos de entretenimento, e todos os posts tem uma imagem de fundo do tmdb, tem alguma maneira de otimizar o carregamento dessas imagens por url? ou alguma outra maneira?
    • By Lottechar
      tenho uma funçao e quero modificar os estilos sem precisar ficar escrevendo "document bla bla" toda hora em todas as modificaçoes .style, 
      o codigo e mais ou menos isso:
       
      function teste() { var info_cor = document.getElementById('mensagemCor').value; mensagemCor.style.color = "#fff"; } ja verifiquei esta com o eveneto os IDs estao certos, mas da erro especificamente na
       
      info_cor.style.color = "#fff"; alguem pode me tirar a duvida de como é a forma correta?
    • By Claudia França
      prezados como eu altero de loked para unloked do arro para não carregar o java e seguir com o procedimento. 
       
       
      ?Veja nesse link https://drive.google.com/drive/u/0/folders/1h0EbUoz3UOL8j9orWirUAPILt7cg7q-p 
      minhas imagens não estao subindindo aqui, não sei porque, acho que tenho limitação. 
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.