Ir para conteúdo
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> 
Editado por William Bruno
Adicionar code

Compartilhar este post


Link para o post
Compartilhar em outros sites

O que aparece no console de erros ?

 

Ctrl + Shift + J no Firefox

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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...

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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>

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por leo_santo1
      Venho por meio desse post procurar ajuda com meu código!
      Estou fazendo um código usando `DataTable` , sou iniciante na programação, depois de umas pesquisas e até mesmo algumas dicas conseguir construir uma DataTable com banco de dados.
      Continuando minhas pesquisas para aprimorar mais ainda o código, percebi que a  `DataTable` possuir varias funções interessantes, umas delas em especifico chamou bastante minha atenção e até me ajudaria no código que no caso é o uso de Linhas filhas ocultas, que quando fazemos o click em cima de um botão aparece as informações extras da linha ( no caso os dados a mais do banco ) e ao apertar ela novamente ele oculta as informações.
      Gostaria de ajuda para criar essa função na minha Tabela, já realizei pesquisas no próprio site da  `DataTable` , aqui, porem não entendo bem o jeito que eles explicam.
      segue abaixo meu código da table e da  `DataTable` que conecta com o Banco.
       
      Tabela
      <table id="employee-grid" cellpadding="0" cellspacing="0" border="0" class="display" width="100%"> <thead> <tr> <th>Nome</th> <th>CPF</th> <th>Data de Nascimento</th> <th></th> <th>Ação</th> <th></th> </tr> </thead> <thead> <tr> <td><input type="text" data-column="0" class="search-input-text" style="width: 150px;"></td> <th><input type="text" data-column="1" class="search-input-text" style="width: 150px;"></td> <th><input type="text" id="data" data-column="2" class="search-input-text" style="width: 150px;"></th> <th></th> <td> </td> <td></td> </tr> </thead> </table> Script DataTable
      $(document).ready(function() { var dataTable = $('#employee-grid').DataTable( { "processing": true, "serverSide": true, "bJQueryUI": true, "oLanguage": { "sProcessing": "Processando...", "sLengthMenu": "Mostrar _MENU_ registros", "sZeroRecords": "Não foram encontrados resultados", "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros", "sInfoEmpty": "Mostrando de 0 até 0 de 0 registros", "sInfoFiltered": "", "sInfoPostFix": "", "sSearch": "Buscar:", "sUrl": "", "oPaginate": { "sFirst": "Primeiro", "sPrevious": "Anterior", "sNext": "Seguinte", "sLast": "Último" } }, "ajax":{ url :"../Tabelas/Tabela_consulta_cliente.php", // json datasource type: "post", // method , by default get error: function(){ // error handling $(".employee-grid-error").html(""); $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>'); $("#employee-grid_processing").css("display","none"); } } } ); $("#employee-grid_filter").css("display","none"); // hiding global search box $('.search-input-text').on( 'keyup click', function () { // for text boxes var i =$(this).attr('data-column'); // getting column index var v =$(this).val(); // getting search input value dataTable.columns(i).search(v).draw(); } ); $('.search-input-select').on( 'change', function () { // for select box var i =$(this).attr('data-column'); var v =$(this).val(); dataTable.columns(i).search(v).draw(); } ); } ); Conexão DataTable com o Banco de dados
      <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "loc_equipamentos"; $conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error()); $requestData= $_REQUEST; $columns = array( 0=>'nome_usuario', 1=> 'cpf_usuario', 2=> 'data_nascimento', 3=> 'id_usuario', 4=> 'id_usuario', 5=> 'id_usuario' ); $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario"; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalData = mysqli_num_rows($query); $totalFiltered = $totalData; . $sql = "SELECT nome_usuario, cpf_usuario, data_nascimento, id_usuario "; $sql.=" FROM usuario WHERE tipo_perfil = 'CLIENTE' AND ativo_usuario = 'TRUE'"; if( !empty($requestData['columns'][0]['search']['value']) ){ $sql.=" AND nome_usuario LIKE '".$requestData['columns'][0]['search']['value']."%' "; } if( !empty($requestData['columns'][1]['search']['value']) ){ $sql.=" AND cpf_usuario LIKE '".$requestData['columns'][1]['search']['value']."%' "; } if( !empty($requestData['columns'][2]['search']['value']) ){ //age $sql.=" AND data_nascimento LIKE '".$requestData['columns'][2]['search']['value']."%' "; } $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $totalFiltered = mysqli_num_rows($query); $sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." "; $query=mysqli_query($conn, $sql) or die("employee-grid-data.php: get employees"); $data = array(); while( $row=mysqli_fetch_array($query) ) { $nestedData=array(); $informacao ="<div class='botaodiv'> <a href = ?informacao=".$row['id_usuario']." >+ Informações</a> </div>"; $editar ="<div class='botaodiv'> <a href = ?editar=".$row['id_usuario']." >Editar</a> </div>"; $deletar ="<div class='botaodiv'> <a href = ../Eventos/evento.php?DesativaCadastro=".$row['id_usuario']." >Excluir</a> </div>"; $nestedData[] = $row["nome_usuario"]; $nestedData[] = $row["cpf_usuario"]; $nestedData[] = $row["data_nascimento"]; $nestedData[] = $informacao; $nestedData[] = $editar; $nestedData[] = $deletar; $data[] = $nestedData; } $json_data = array( "draw" => intval( $requestData['draw'] ), "recordsTotal" => intval( $totalData ), "recordsFiltered" => intval( $totalFiltered ), "data" => $data ); echo json_encode($json_data); ?> Fora o caso de criar Detalhes para Linhas, Caso alguém tenha alguma sugestão de como melhorar meu código ( por exemplo uma Conexão ao Banco mais simples, um Js melhor etc.. ) ou alguma critica para eu evoluir, irei agradecer bastante!  
    • Por anepri
      Preciso fazer uma página de consulta onde selecionando a cidade traga como resultado estabelecimentos comerciais daquela cidade. O exemplo do código que estou usando funciona perfeitamente com países, estados e cidade, mas na hora que faço a função "lojas", mesmo o código sendo idêntico não aparece o resultado. O que tem me deixado doida é que os primeiros select funcionam, mas o último "lojas" não funciona de jeito nenhum! Alguém pode olhar o código e me dizer onde estou pecando?
       
      $(function(){ // Pais function pais(){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'pais' }, dataType: 'json', success: function(data){ console.log(data); for(i = 0; i < data.qtd; i++){ $('select[name=pais]').append('<option value="'+data.id[i]+'">'+data.pais[i]+'</option>'); } } }); } pais(); function estado(pais){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'estado', id: pais }, dataType: 'json', beforeSend: function(){ $('select[name=estado]').html('<option>Carregando...</option>'); }, success: function(data){ $('select[name=estado]').html(''); $('select[name=estado]').append('<option>Selecione o estado</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=estado]').append('<option value="'+data.id[i]+'">'+data.estado[i]+'</option>'); } } }); } // Cidade function cidade(estado){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'cidade', id: estado }, dataType: 'json', beforeSend: function(){ $('select[name=cidade]').html('<option>Carregando...</option>'); }, success: function(data){ $('select[name=cidade]').html(''); $('select[name=cidade]').append('<option>Selecione a cidade</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=cidade]').append('<option value="'+data.id[i]+'">'+data.cidade[i]+'</option>'); } } }); } function contrubuinte(cidade){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'contrubuinte', id: cidade }, dataType: 'json', beforeSend: function(){ $('select[name=contrubuinte]').html('<option>Carregando...</option>'); }, success: function(data){ console.log(data); $('select[name=contrubuinte]').html(''); $('select[name=contrubuinte]').append('<option>Selecione a contrubuinte</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=contrubuinte]').append('<option value="'+data.id[i]+'">'+data.contrubuinte[i]+'</option>'); } } }); } $('select[name=pais]').change(function(){ var id = $(this).val(); estado(id); }); $('select[name=estado]').change(function(){ var idEstado = $(this).val(); cidade(idEstado); }); $('select[name=cidade]').change(function(){ var id = $(this).val(); contrubuinte(id); }); }); <?php require("config.php"); $retorno = array(); if($_GET['acao'] == 'pais'){ $sql = $pdo->prepare("SELECT * FROM pais"); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['pais'][$n] = $ln->pais; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'estado'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM estados WHERE id_pais = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['estado'][$n] = $ln->estado; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'cidade'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM cidades WHERE id_estado = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['cidade'][$n] = $ln->cidade; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'contribuinte'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM contribuinte WHERE id_cidade = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['contribuinte'][$n] = $ln->contribuinte; $retorno['id'][$n] = $ln->id; $n++; } } die(json_encode($retorno)); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select name="pais"> <option>Selecione o Pais</option> </select> <select name="estado"> <option>Selecione o Estado</option> </select> <select name="cidade"> <option>Selecione a Cidade</option> </select> <select name="contribuinte"> <option>Selecione o Contribuinte</option> </select> <script src="jquery.js"></script> <script src="funcoes.js"></script> </body> </html>  
    • Por dba.amaro
      Galera, bom dia/tarde/noite, 
       
      Estou desenvolvendo uma aplicação web, porém preciso mostrar algumas informações e os objetos vão mudar de cor / porcentagem, segundo as informações que estão contidas no banco de dados, 
       
      Tenho, algumas ideias, porém não sei nem por onde começar, se alguém puder ajudar, agradeço !!
       
      Um abraço  a todos e bons posts!
    • Por jlrs19833
      Bom dia, pessoal! Estou precisando de uma luz para saber como tratar determinado problema:
       
      Cenário: Ambiente em desenvolvimento de plataforma para gestão de uma empresa.
      Linguagem principal: PHP (framework CodeIgniter)
      Dificuldade: retornar dados de select dinâmico junto ao evento de post do formulário.
       
      Descrição: Conforme mencionado acima, estou desenvolvendo um pequeno sistema para uma empresa que conterá poucas telas, sou desenvolver entusiasta, então não tenho muito conhecimento e prática com este assunto. Em determinada tela, o cliente quer que haja um formulário de cadastro onde dentre os diversos campos deste form, haverá dois do tipo select, onde um é o select de cidade e o outro do tipo estado. O select de Estado é preenchido automaticamente quando do carregamento da view, através de uma chamada do controller/model junto ao BD e o select cidade é preenchido de maneira automática, com javascript, através de uma mesma consulta, passando o ID do campo estado. Minha dificuldade está quando faço o submit deste form, pois o campo value do option deste select (cidade) não é enviado junto, pois no código fonte ele não foi carregado. Como posso fazer para recuperar esse value e enviar junto com o evento de submit?
       
      Segue como meus arquivos estão sendo feitos. Como pode observar estou, tentando apenas printar os campos para que eu possa ter certeza que eles estão sendo carregados.
      https://gist.github.com/jlrs19833/808887a5221ff31ca6ea22bf0c8b85a5
       
      Peço desculpas se estou postando no local errado e que os moderadores me orientem neste caso.
       
      Desde já agradeço o auxílio de cada um.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.