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 cleomarjose
      Boa noite
      preciso de uma ajuda de vocês, montando um raspador de site e quero que as informaçções fiquem organizadas, não consigo descobrir como coloco as id valorCep e valorComplCep na mesma linha, obrigado pela ajuda
       
                 <h1> <p id="valorCep">                 </p>    </h1>
                 <h1> <p id="valorComplCep">            </p>    </h1>
                 
      <input type="text" id="cependseg__numero" name="cependseg__numero" autocomplete="off" class="input-cep" maxlength="5" onkeyup="autoTabSelection( get(&#39;cependseg__numero&#39;) , get(&#39;cependseg__complemento&#39;), event);" value="29092" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);javascript:acionarBuscaDiretaPorCep_cependseg(this);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),3,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;);" onkeypress="return isNumber(event);"> - <input type="text" id="cependseg__complemento" name="cependseg__complemento" autocomplete="off" class="input-complemento_cep" maxlength="3" value="065" onchange="javascript:atualizarHiddenCep(&#39;cependseg&#39;);javascript:limparCampos([&#39;estabelecimento&#39;,&#39;codigoLocalDesconto&#39;,&#39;codigoTipoLocalDesconto&#39;,&#39;clausulaServico&#39;,&#39;codigoClausulaServico&#39;]);" onblur="javascript:setValorFromId(&#39;cependseg&#39;,preencherAEsquerda(getValorFromId(&#39;cependseg&#39;),5,&#39;0&#39;));javascript:atualizarHiddenCep(&#39;cependseg&#39;); javascript:acionarBuscaDiretaPorCep_cependseg(this);" onkeypress="return isNumber(event);"><div class="div-botoes-atributo div-botao-encontrarcep"><div class="btCor3"></div>
      <script>
               capturando = document.getElementById('cependseg__numero').value;
          document.getElementById('valorCep').innerHTML = capturando;
               capturando = document.getElementById('cependseg__complemento').value;
          document.getElementById('valorComplCep').innerHTML = capturando;
          </script>
    • By srawolf
      Eu tenho uma tabela, essa tabela vem com o campo nome e matricula do banco de dados (fiz em mongodb), eu ia colocar uns inputs para notas e ser enviado no text do email, mas ele repete a primeira linha da tabela
      Estou usando, node.js, nodemailer, mongodb
      o email não aparece na tela, so no banco de dados e eu puxo ele quando vou enviar o email, como eu posso identificar esses inputs para que cada email receba sua respectiva nota?
    • By studdiox
      Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 
      ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview
      de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 
      antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja
      uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o
      código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele
      para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 
       
       
      <html> <head> <style type="text/css"> .thumb-image{ float:left;width:100px; position:relative; padding:5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" multiple="multiple" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html> No meu caso ele ficaria assim
       
       
       
      <html> <head> <style type="text/css"> .thumb-image { float: left; width: 100px; position: relative; padding: 5px; } </style> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <div id="wrapper" style="margin-top: 20px;"> <input id="fileUpload" type="file"/> <div id="image-holder"></div> </div> <script language="JavaScript"> $("#btnCLear").on('click',function(){ $("#image-holder").html(""); }); $("#fileUpload").on('change', function () { //Obtendo contagem dos arquivos selecionados var countFiles = $(this)[0].files.length; var imgPath = $(this)[0].value; var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase(); var image_holder = $("#image-holder"); image_holder.empty(); if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") { if (typeof (FileReader) != "undefined") { //loop para cada arquivo selecionado para uploaded. for (var i = 0; i < countFiles; i++) { var reader = new FileReader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendTo(image_holder); } image_holder.show(); reader.readAsDataURL($(this)[0].files[i]); } } else { alert("Seu navegador não tem suporte ao FileReader."); } } else { alert("Selecione apenas arquivos de imagem."); } }); </script> </body> </html>  
       
       
       
    • By Overtron8000
      Ola Pessoas,
      Recentemente fiz uma prova para Desenvolvedor Javascript jr em uma empresa e tinha varias questões para escrever o código NA MÃO  e uma delas me deixou encabulado por exigirem que um junior saiba de cór isso era a seguinte pergunta:
       
      Dado o JSON abaixo construa um código que faça o calculo da media do parâmetro "time"  quando "type" for semelhante a "call" e o máximo valor para "time" quando "type for semelhante a "ping". Considere que o array events poderá conter milhões de objetos portanto seu código deve levar em consideração o processamento assíncrono do Node.js de forma que o resultado seja síncrono, ou seja, o codigo so deve completar quando o resultado do s cálculos estiverem prontos.
      JSON : events = { [ {type:"ping", time :10) [ {type:"ping", time: 5) [ {type:"call", time: 99) [ {type:"call", time: 67) [ {type:"ping", time: 7) [ {type:"call", time: 127) }  
      Isso tudo para fazer no resto da folha que sobrou alem da pergunta, se alguém saber uma solução poste ai que estou curioso ate hoje, sei que leva o conceito de promisses assíncronas mas ainda não cheguei nessa parte
       
       
       
       
                                   
       
       
    • By RSN
      Boa noite,
      Gostaria de após selecionar o produto carregasse outro select informando os preços(tabela produto), com javascript fazendo requisição para a servlet.
      div class="form-group col-md-4"> <label for="exampleInputEmail1">Produto</label> <select class="form-control select2" style="width: 100%;" id="id_produto" name="id_produto"> <option value="nao_informado">Selecione</option> <c:forEach items="${produto}" var="product"> <option value="${product.id}" id="${product.id}" <c:if test="${product.id == orcament.id_produto}"> <c:out value = "selected=selected" /> </c:if>> ${product.descricao}</option> </c:forEach> </select> </div> <div class="form-group col-md-1"> <label for="exampleInputEmail1">Tabela/Precos</label> <select class="form-control select2" style="width: 100%;" id="id_table" name="id_table" > <option value="nao_informado">Selecione</option> </select> </div>  
×

Important Information

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