Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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)][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)][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)][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><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>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
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.
o conteudo do jquery é essa..
/*!
* jQuery JavaScript Library v1.7.2
* http://jquery.com/
*
* Copyright 2011, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* Includes Sizzle.js
* http://sizzlejs.com/
* 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)[ \//,
ropera = /(opera)(?:.*version)? \//,
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...
e qual versão do jquery devo somente usar?
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.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.
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>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
O que aparece no console de erros ?
Ctrl + Shift + J no Firefox