I am new to caman js. I want to edit image residing at my local machine using caman js. I searched for it but could not find appropriate code. I also went through tutorial of caman js.
link: http://camanjs.com/guides/
Can anyone please help me?
Thank you.
The link you provided gives the information you are looking for. If I understand your question correctly, these are the basic steps you need to take.
Make sure the Camanjs plugin is included in your project.
Have an img or canvas element on your working DOM
After the DOM is ready Initialize Camanjs by passing to it either a selector or DOM element. Here is the relevant code to the link you provided:
Caman("#image-id", function () {
// Setup whatever options or image processing you want here
// Make sure to render after
this.brightness(5).render();
});
Your question asks about a file on your local machine. From my understanding, your image has to be present in the DOM to work on it with Camanjs. Therefore, your image should be located somewhere your html/javascript can find. (i.e. 'img/myLocalPicture.jpg' relative to your .html file)
For me, looking at the source code of Camanjs was very helpful as well as looking at the API docs: http://camanjs.com/api/
If you want a more specific answer please rephrase your question to be more specific.
You can load a file using the HTML5 File API.
If you are using JQuery, the following will allow you to browse for a local file, and then apply an effect to it. (You don't need jquery, this is just a feature of HTML5)
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/caman.full.min.js"></script>
</head>
<body>
<img id="myimage" alt="Image go here" />
<form>
<input type="file" id="fileinput" />
</form>
</body>
<script>
$("#fileinput").change(function(evt) {
var image = evt.target.files[0];
$("#myimage").attr("src", URL.createObjectURL(image));
processImage();
});
function processImage() {
Caman("#myimage", function() {
// Perform your effects here
});
}
</script>
</html>
Related
trying to create this file that changes an object's attributes (size, color, fade out, and reset) with the click of buttons. Not working right now and trying to figure out what I'm missing .... Any thoughts?
changing a box size
The first thing I notice is the duplication of attribute in your <script> tag and actual javascript in between the <script> and </script>. That's poor coding.
If you need code referenced in the file named 'javascript.js', then it needs to be it's own <script> declaration in HTML:
<script type="text/javascript" src="javascript.js"></script>
and THAT'S IT. THEN follow with any code you want on the page with a new <script> declaration block.
IF you're trying to make the jQuery library available, that can be accomplished with this: (put it in the <head></head> section of your html code.)
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
jQuery is very particular about the selectors you feed it:
1) no prefix symbol means an html tag: $("table") means match any <table> in the HTML
2) a dot prefix symbol means match a class: $(".button1") WILL FIND the elements that you actually have in your code. They are not being found because you didn't prefix with a dot in your selector.
3) a hashtag/pound-sign/number-sign means match an ID: $("#box") will find that box at the beginning of your code.
<script type="text/javascript">
$(function(){
$(".button1").click(function(){
$("#box").css({'height':400,'width':400});
});
$(".button2").click(function(){
$("#box").css('background-color','blue');
});
$(".button3").click(function() {
$("#box").fadeOut();
});
$(".button4").click(function() {
$("#box").show().css({'height':150, 'width':150, 'background-color':'orange'});
});
});
</script>
here's a link to a FUNCTIONING codepen showing that what you're trying to do is possible.
Whatever i do ng-click of AngularJS in paper-button within polymer-element it doesn't work, is there any file to import? please tell me step by step what should i do.
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/paper-button/paper-button.html"/>
<link rel="import" href="../components/core-signals/core-signals.html">
<polymer-element name="my-statut-footer_OnEdit">
<template>
<div class="tag-container">
<paper-button class="shadow" ng-click='annulerClick()'>Annuler</paper-button>
<paper-button class="colored shadow" ng-click='publierClick()'>Publier</paper-button>
</div>
</template>
<script>
Polymer('my-statut-footer_OnEdit',{
});
</script>
</polymer-element>
The best solution that I've found is to use polymer's on-click event, then inside the method select the angularjs controller by his id
<paper-button on-click='publierClick()'>Publier</paper-button>
Polymer('my-statut-footer_OnEdit',{
publierClick: function(e, detail, sender) {
var scope = angular.element(document.getElementById(('controllerID')))
.scope();
scope.$apply(function () {
scope.publier();
});
}
});
Polymer and Angular are not compatible with each other.
Polymer makes extensive use of the brand new Web Components standards which Angular know literally nothing about so when Angular's Compiler comes across a Custom Element it tries to use it as a Angular Directive which it is actually not so it throws lot of errors.
Here are a few Solution:
Use ng-polymer-elements which helps Polymer elements be compatible with Angular.
Wait for Polymer 0.8 and hope it goes along with Angular.
While you are here please make sure to view some answers for the Following question this might help you understand some technical differences between polymer and angular:
What is the difference between Polymer elements and AngularJS directives?
For now there is no efficient way to achieve it. I used Iframe to make it working. Hope will find better solution, but for now angular can't work efficient with shadow html generated by polymer.
I am attempting to create a SPA using AngularJS as the main view for my website. I'm using ServiceStack on the server-side and can therefore cleanly serve HTML or JSON requests depending on what's accessing it. My main concern is the use of script blockers, preventing AngularJS from rendering the page properly. So far my main way of working is to render static pages, and inject a small script that redirects to the AngularJS-powered pages if it detects if Javascript is enabled. This works great since every URL works fine when the user begins at the static pages, but I've ran into a couple of snags.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
This causes the first page loaded to be loaded twice.
I'm looking for an alternative, but so far I haven't found any clean solutions. I was thinking about including the "?View=SPA" as a POST variable, but I'm still iffy on that implementation.
Any thoughts?
Instead of redirecting to an other page, I would implement both cases in the same HTML File as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>.hideIfNoScript {display: none}</style>
</head>
<body ng-app ng-init="msg = 'hello world'">
<input class="hideIfNoScript" ng-model="msg" />
<p class="hideIfNoScript">{{msg}}</p>
<noscript>
<p>Content without javascript</p>
</noscript>
<script type="text/javascript">
var myEl = angular.element( document.querySelectorAll( '.hideIfNoScript' ) );
myEl.removeClass('hideIfNoScript');
</script>
</body>
</html>
The CSS Class hideIfNoScript in the head section makes sure that all HTML Tags with this class are never shown to the user, if javascript is disabled.
The noscript tag shows the alternative content.
If javascript is enabled, the little script at the end of the body section makes those elements visible. And in this case, the contents of the noscript tag are hidden.
Browsing to a link which includes the "?View=SPA" breaks the page if JavaScript is disabled
Hide those links by default:
a[href*='SPA'] { display: none; }
This causes the first page loaded to be loaded twice
Use a cookie on a browser-check page which loads the first page in an iframe or redirects to it to avoid this.
References
Track Non-JavaScript Visits In Google Analytics
As the title says; I want the content of an external file (text,html,php etc.) onto a div.
There is basically text in an external file, called: text_1.txt or *text_1.html* , and I want that text displayed within a div that is located on a homepage.
The perfect solution would be a pretty basic code to display text from a text or html file
by inserting it onto a div classed: content
Here I have illustrated the issue with basic code, use this as an example to write a solution.
Code in text_1.html:
<p>Hello world.</p>
Code in index.html:
<!doctype html>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
This is as simple as I can put it.
I highly appreciate all the answers I receive, thank you.
PS here are some things you should avoid answering:
Use iframes, or any other frame type solution.
Make use of the onclick function within jquery etc.
Use ineffective textfields to replace certain text.
Make usage of an insertion code for virtual server or similar methods.
There's no way to do this unless and until you use Server Side Includes using PHP, ASP, or JSP
http://en.wikipedia.org/wiki/Server_Side_Includes
If you want to do it using php you can use this:
require_once('filename.php'); /* For including files */
Or use native functions to open .txt files in your pages
Why dont you just do it with jquery
$(document).ready(function() {
$('.content').load('text_1.html');
});
Sorry for the silly question, does everyone know how to start using AngularUI? I've downloaded it from Github and read the instruction in README but still don't understand what I have to do.
Steps to integrate:
Include jQuery and jQuery-ui (best served from a CDN)
Include angular (it is the best to include if from a CDN)
Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
Include any jQuery plugins for the directives you are planning to use
Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:
var myApp = angular.module('myApp',['ui.directives']);
Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):
<input name="dateField" ng-model="date" ui-date>
Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/
You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.
As of 3rd of May 2013, here are the steps:
include
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
register ui
angular.module('myFancyApp', ['ui.bootstrap']);
make sure myFancyApp is the same as in your <html ng-app="myFancyApp">
Let the magic commence.
I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />
It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.
Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
The core of things is getting the configuration right:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}
For something like the following HTML snippet:
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>
You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)
The instructions are in the readme.md file at their official github repository
Angular UI
Alternatively, the way you can find out how to integrate is to open the angular-ui js file (example: ui-bootstrap-tpls-0.6.0.js) and in the first line, you will notice the following statement
angular.module("ui.bootstrap", [...deps...])
Based on the above code, you need to inject 'ui.bootstrap' into your module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);