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 israel@iproduce.com.br
      Olá,
      Boa noite!
      Tenho algumas vagas para motion (basicamente banner de internet animado e vinhetas para redes sociais) para a cidade do Rio de Janeiro. As vagas são temporárias (6 meses), podendo ocorrer a efetivação nesse período. É necessário estar alocado no escritório no Rio.
      Conhecimento avançado em: Adobe Animate CC, Google Web Designer, After Effects.
      Além destes programas é um diferencial conhecer a linguagens: HTML5, CSS3 e Javascript.
      Tem interesse ou conhece alguém que esteja precisando? Então manda o seu portifólio e CV para no e-mail: freela@iproduce.com.br
      Boa sorte!
    • By Vinicius Bazan
      Sou leigo ainda no Java Script e não manjo de muita coisa ainda, eu preciso fazer uma função que que deve ser executada na pagina HTML, eu crio a função dentro da tag <script> na <head> do html, mas como eu chamo essa função no momento que eu precisar no <body>, o que eu devo digitar pro código saber que ali deve executar a função?
    • By PRWEB
      Boa tarde!!!
       
      Por favor como faço para marcar um checkbox e ai marca automaticamente um campo radio?
       
      Obrigado
    • By Randys
      Eu selecionei um elemento e adicionei a classe ativo nele, agora não estou conseguindo remover a classe quando eu seleciono outro elemento
      const article = document.getElementById(id); article.classList.add('ativo'); Eu preciso remover a classe ativo quando eu clicar em outro elemento article, como faço isso?
    • By Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
×

Important Information

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