Jump to content

Archived

This topic is now archived and is closed to further replies.

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> 

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.

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

  • Similar Content

    • By fideles
      Pessoal, tenho uma dúvida, talvez muito boba.
       
      Tenho um formulario com os input em array, e um alert javascript mostrando que foi registrado com suceso.
       
      O problema maior é que se for gravado 30 registro no banco de dados, ele mostra 30 alertas de registro gravado com suceso, por acaso é possivel limitar esse tanto de alerta para somente 1 independente da quantidade que ele grava no banco ?
    • By Erick Plant
      Olá! Precisando de uma ajudinha.
       
      FICAREI MUITO GRATO PELA AJUDA...SE PUDEREM ME DAR UMA LUZ!
       
      Estou arrumando um código que foi de outra pessoa, mas antes disso, preciso "apagar o incêndio" aqui e fazer funcionar uma implementação.
       
      Tenho um dropzone que carrega um arquivo sem necessidade de form. O problema começa por agora. Foi-me pedido para que eu implementasse um select trazendo do banco uma info e que enviasse via get 'junto com a url que envia as informaçoes do arquivo'.
      O carregador do select foi feito, eu estou pegando o value do select dinamicamente, pois não tem form.
      Porém, o problema é q nao sei como pegar esse value capturado para implentá-lo  na url via get.
       
       
      o js  e o dropzone na pag é esse:
      //AQUI EU PEGO O VALOR DO SELECT DE FORMA DINÂMICA id = ''; $(document).ready(function () { $("#seguimento").change(function () { id = $('#seguimento').val(); }); }); Dropzone.autoDiscover = false; Dropzone.options.tstDz = { //////////////////////////////////////////////////////// //AQUI O DROPZONE QUE PASSA OS PARAMETROS VIA GET /////////////////////////////////////////////////////// url: "<?= base_url('homeCgmrr/MonitoramentoPadraoDesempenho/addDoc?ambiente='.$ambiente.'&value='); ?>", paramName: "arquivo", maxFilesize: 2, acceptedFiles: ".xlsx,.ods,.xls,.csv", addRemoveLinks: true, // init: function () { // this.on("complete", function (file) { // setGallery(file); // }) // } init: function () { this.on('error', function(file, response) { $.notify("Você não pode fazer upload de arquivos com essa extensão, apenas arquivos .xlsx !", 'warning'); }); this.on('success', function(file, resp){ if(resp['status'] == false){ $.notify("Ocorreu erro no preenchimento da planilha. Por favor, verifique e tente novamente.", 'warning'); setGalleryError(file); }else{ setGallery(file); $.notify("Arquivo enviado com Sucesso!", 'success'); } }); } };  
      Como eu posso fazer pra carregar o id SE o base_url está em PHP?
      url: "<?= base_url('homeCgmrr/MonitoramentoPadraoDesempenho/addDoc?ambiente='.$ambiente.'&value='AQUI VAI O ID); ?>",  
      Obrigado pela ajuda!
       
    • By Elisame Araújo
      Bom dia,
       
      Estou montando um site de clã de jogos online (especificamente de Battlefield), e neste momento estou desenvolvendo o painel de administração do site, mas me deparei com uma dúvida que não consigo encontrar uma situação na internet que se aplique ao que eu preciso.
       
      A situação é a seguinte:
       
      Eu tenho um módulo onde o administrador vai adicionar um mapa, um tamanho de jogo e um modo para a rotação do servidor do clã, a exemplo desse pop-up:
       
      A lista de mapas vem do BD.
       
      O que eu preciso é que o segundo e o terceiro <select> sejam preenchidos baseados na seleção do primeiro. Onde, a exemplo:

       
      Seleção de Mapa: Ilhas Lofoten
      Opções Disponíveis a partir do 1º Select: 16 e 32 Jogadores
      Opções Disponíveis a partir do 1º e 2º Select: Dominação, TDM, etc.
       
      Para ficar mais simplificado: Seleção 1 > Opções A Partir de Seleção 1 > Opções A partir de Seleção 1 e 2
       
      Infelizmente eu ainda não tenho conhecimento em JavaScript ou JQuery ou JSON - ainda estou para aprender -, e não consigo encontrar uma resposta simplificada para isso
       
      Como eu poderia fazer isso da maneira mais simples ou didática?
       
    • By lezão
      Ola Galera.
      Boa tarde!
      Td bem com vcs?
      Tenho um codigo de script ele roda perfeitamente, mas ele possui um detalhezinho, o resultado é apresentado dentro de um input text.
      teria como algum me  ajudar em cima deste codigo a tirar o resultado do input e apresentar fora do input?
      <input type="checkbox" name="sabor" id="evento_value1" value="28.00"> <input type="checkbox" name="sabor" id="evento_value2" value="28.00"> <input type="text" size="5" id="evento_value" onclick="AddValor()" disabled="disabled"/> <script type="text/javascript"> var total = 0; //Chama a função com click em qualquer checkbox $(':checkbox').click(function() { //Atribui o valor do input p/ variável 'valor' var valor = parseInt($(this).val()); //Se o checkbox for marcado ele soma se não subtrai if ($(this).is(":checked")) { total += valor; } else { total -= valor; } //Atribui o valor ao input $("#evento_value").val(total); }); </script>  
    • By Sapinn
      Pessoal como faço para somar horas e minutos no javascritp pegando os dados em um campo de texto??? Eu tenho o codigo mas ele não funciona 

       
      <input type="text" value="2020-11-10 15:20" id="valor-tempo" > <input type="text" value="2020-11-10 01:20" id="adicionar-tempo" > <script type="text/javascript"> let input_hora = document.getElementById('valor-tempo').value; let data = new Date(input_hora) let a = `${data.getHours()}:${data.getMinutes()}` let input_hora2 = document.getElementById('adicionar-tempo').value; let data2 = new Date(input_hora2) let b = `${data2.getHours()}:${data2.getMinutes()}`             var adicionar = document.getElementById("adicionar-tempo").value;         var pega_tempo = document.getElementById("valor-tempo").value;             function somaHora(a, b, zerarHora) {          if(a.length != 5 || b.length != 5) return "00:00";     temp = 0;     nova_h = 0;     novo_m = 0;           hora1 = a.substr(0, 2) * 1;     hora2 = b.substr(0, 2) * 1;     minu1 = a.substr(3, 2) * 1;     minu2 = b.substr(3, 2) * 1;         temp = minu1 + minu2;     while(temp > 59) {             nova_h++;             temp = temp - 60;     }     novo_m = temp.toString().length == 2 ? temp : ("0" + temp);       temp = hora1 + hora2 + nova_h;     while(temp > 23 && zerarHora) {             temp = temp - 24;     }     nova_h = temp.toString().length == 2 ? temp : ("0" + temp);       return nova_h + ":" + novo_m; } novaHora = somaHora(a,b, false); console.log(novaHora);             </script>  
×

Important Information

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