Hi i want to implement image cropper on my page. I found some code from Codepen.I used the same code but the code is not working and it shows the below error
angular.module('app', ['uiCropper'])
.controller('Ctrl', function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
});
.cropArea {
background: #E4E4E4;
overflow: hidden;
font-size: 0px;
line-height: 0px;
}
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<table ng-app="app" ng-controller="Ctrl">
<td>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</td>
<td>
<div class="cropArea"><div ng-hide="myCroppedImage">Select an image file: <input type="file" id="fileInput" /></div>
<ui-cropper image="myImage" area-type="circle" chargement="'Loading'" result-image="myCroppedImage" canvas-scalemode="true"></ui-cropper>
</div>
</td>
</table
You need to refer the javascript , which you have not done with your code,
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="http://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"> </script>
That is because you are not injecting the uiCropper js file in index.html. You have to include uiCropper js in index.html. Add this file t index.html and check.
<script src="http://rawgit.com/CrackerakiUA/ui-cropper/master/compile/unminified/ui-cropper.js"></script>
Related
I try to generate multi layered HTML content to canvas/ image
bottom layer an image
top layer other content
Here is my JS Fiddle:
https://jsfiddle.net/rako87/b3qhLm5u/7/
My issue is, when I change the bottom layer image source its not reflecting on the rendered canvas (always render the original HTML value)
How could I achieve that when I change the img src with JS that is reflecting on the rendered IMG ??
THX!
JS:
// IMG dropdown select
var selectBox = document.getElementById('selectBox');
var theImg = document.getElementById('theImg');
selectBox.addEventListener('change', function() {
theImg.src = this.options[this.selectedIndex].value
}, false);
// Generate IMG to canvas with button click
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d'),
html_container = document.getElementById("thehtml"),
html = html_container.innerHTML;
$(function() {
$("#btnGEN").click(function() {
rasterizeHTML.drawHTML(html).then(function (renderResult) {
context.drawImage(renderResult.image, 0, 0);
});
});
});
I don't know what's up with the code snippet below (the error: rasterizeHTML.allinone.js:11 Uncaught (in promise) TypeError: Cannot read property 'open' of null), but when I use the javascript portion of the code in your jsfiddle, I think it accomplishes what you were wanting.
// IMG dropdown select
var selectBox = document.getElementById('selectBox');
var theImg = document.getElementById('theImg');
selectBox.addEventListener('change', function() {
theImg.src = this.options[this.selectedIndex].value
}, false);
$(function() {
$("#btnGEN").click(function() {
// Generate IMG to canvas with button click
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d'),
html_container = document.getElementById("thehtml"),
html = html_container.innerHTML;
rasterizeHTML.drawHTML(html).then(function (renderResult) {
context.drawImage(renderResult.image, 0, 0);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.3.0/rasterizeHTML.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.3.0/rasterizeHTML.allinone.js"></script>
<table style="width:100%">
<tr>
<th width="300px">HTML</th>
<th width="300px">Rendered IMG</th>
</tr>
<tr>
<td>
<p>1.Select source img: </p>
<select id="selectBox">
<option value="https://dummyimage.com/200x200/1d83b3/ffffff.jpg&text=+">Blue</option>
<option value="https://dummyimage.com/200x200/1f995a/ffffff.jpg&text=+">Green</option>
</select> <br/><br/>
<p>2.Click Button to Generate img to canvas: </p>
<button type="button" id="btnGEN" >Generate</button><br/>
<br/>
<div id="thehtml" style="position:relative;">
<style>
.test {
font-size: 22px;
}
</style>
<div style="z-index:0; position:absolute;">
<img id="theImg" src="https://dummyimage.com/200x200/1d83b3/ffffff.jpg&text=+">
</div>
<div style="z-index:1; position:absolute;">
<h2> TEST TEXT </h2>
</div>
</div>
</td>
<td><canvas id="canvas" width="220" height="220" style="border: 1px solid black;"></canvas></td>
</tr>
</table>
I was following the tutorial about building a Flickr Search App with AngularJS (https://www.youtube.com/watch?v=lvGAgul5QT4). I was able to display results on the page, but faced a problem: after displaying all the results I was not able to scroll all the way to the to to my search bar to do another search. What could solve this issue? Thank you in advance!
Here is the code:
index.js
<!doctype html>
<html lang="en">
Flickr Search
<md-toolbar>
<div class="md-toolbar-tools">
<span class="md-flex">Flickr Search</span>
</div>
</md-toolbar>
<md-content layout="column" layout-align="center center">
<div class="app-content">
<form ng-submit="search()" >
<div ng-show="!isSearching">
<md-input-container class="long" flex>
<label>Search for</label>
<input ng-model="searchTerm">
</md-input-container>
</div>
</form>
<div ng-if="isSearching">
<md-progress-circular md-theme="blue" md-mode="indeterminate"></md-progress-circular>
</div>
<div id="result">
<md-card ng-repeat="picture in results.photos.photo | limitTo:2">
<img ng-src="https://farm{{picture.farm}}.staticflickr.com/{{picture.server}}/{{picture.id}}_{{picture.secret}}_b.jpg" alt="" class="md-card-image">
<h3>{{ picture.title }}</h3>
</md-card>
</div>
</div>
</md-content>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/hammerjs/hammer.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="app.js"></script>
app.js
(function(){
'use strict';
angular.module('flickrApp',['ngMaterial'])
.config(['$mdThemingProvider', function($mdThemingProvider){
$mdThemingProvider.theme('blue')
.primaryPalette('pink')
.accentPalette('orange');
}])
.controller('ListController',['$scope','$http',function($scope,$http){
$scope.isSearching = false;
$scope.results = [];
$scope.search = function(){
$scope.isSearching = true;
$http({
method: 'GET',
url: 'https://api.flickr.com/services/rest',
params: {
method: 'flickr.photos.search',
api_key: 'e232c1eade905d440cbdf4e176c828c7',
text: $scope.searchTerm,
format: 'json',
nojsoncallback: 1
}
})
.success(function(data){
console.log(data);
$scope.results = data;
$scope.isSearching = false;
})
.error(function(error){
$scope.isSearching = false;
console.log(error);
});
}
}])
})();
style.css
.app-content{
width: 100%;
}
form{
padding: 10px 30px 20px 25px;
}
md-input-container > input{
width: 100%;
}
md-card{
margin: 0 30px 25px 30px;
}
To scroll to a specific location using angular we can use location service and anchorscroll service.
Add Id in html to location you want to scroll.
Sample html
<div id="scrollto">
//text
</div>
Sample script in angular
$location.hash(scrollto);
$anchorScroll();
This will add scrollto as param to URL and it will scroll to that location.
Try following a recent tutorial: https://www.youtube.com/watch?v=jp-c6_pxAns
You should be able to scroll anywhere on the page.
The HTML code for image file input:
<input type="file" autocomplete="off" name="background-image" accept="image/*" />
The destination div block where I want to dynamically set the background image:
<div class="clock"></div>
The jQuery function I'm currently using for setting image file uploaded as div background image:
$(".background>div>input[type=file]").change(function () {
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
}
else {
$(".clock").css("background-image",'url("' + $(".background>div>input[type=file]").val() + '")');
}
});
The issue is that the background-image is not being set. This may possibly be because when I checked with browser inspector, the file upload is not containing file url.
Note: The background-color of .clock is set to white initially.Also I'd not like to use a server since my intention is to keep it as client side only application.
This may solve your problem
JS FIDDLE
HTML
<input type='file' id='getval' name="background-image" /><br/><br/>
<div id='clock'></div>
CSS
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
PURE JAVASCRIPT
document.getElementById('getval').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("getval").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
It's small way to do this without using FileReader.
http://jsfiddle.net/PuneetChawla/vqn7r0nj/
HTML
<input type='file' id='getval' name="background-image" onchange="readURL(event)" /><br/><br/>
<div id='clock'></div>
CSS
#clock{
background-image:url('');
background-size:cover;
background-position: center;
height: 250px; width: 250px;
border: 1px solid #bbb;
}
JavaScript
function readURL(event){
var getImagePath = URL.createObjectURL(event.target.files[0]);
$('#clock').css('background-image', 'url(' + getImagePath + ')');
}
Explanation - The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter.
var loadFile = function(event) {
var output = document.getElementById('output');
output.style.backgroundImage= "url("+URL.createObjectURL(event.target.files[0])+")";
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<input type="file" accept="image/*" onchange="loadFile(event)">
<div style="width: 500px;height: 500px;" id="output"></div>
</body>
</html>
I want to implement the concept site visitor can upload multiple files click on submit then compress files are upload on server xampp. I am using PHP scripting language.
You can do this in HTML5 supported browser with the help of Canvas API [for images only]. Here is a good example
http://makeitsolutions.com/labs/jic/
HTML5 canvas refrences:
http://diveintohtml5.info/canvas.html
http://www.html5canvastutorials.com/
Below is dummy code:
HTML [Check jQuery path]
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<style type="text/css">
.img_button{ height: 100%; width:100%}
.img_submit{ border: 1px saddlebrown solid; height: 30px; margin-top: 100px}
.box{ float: left; margin: 10px; width: 20%; height: 250px}
.label{ float: left; background: #333; color: #fff; width: 100%; padding-left: 10px }
img{float:left;}
</style>
</head>
<body>
<div class="box" id="box1">
<input class="filename" type="file" id="1" style="display:none" />
<input class="img_button" id="btn1" type="button" onclick="$('#1').trigger('click'); return false;" value="Image-1" />
</div>
<div class="box" id="box2">
<input class="filename" type="file" id="2" style="display:none" />
<input class="img_button" id="btn2" type="button" onclick="$('#2').trigger('click'); return false;" value="Image-2" />
</div>
<div class="box" id="box3">
<input class="filename" type="file" id="3" style="display:none" />
<input class="img_button" id="btn3" type="button" onclick="$('#3').trigger('click'); return false;" value="Image-3" />
</div>
<input class="img_submit" type="button" value="Upload" onclick="uploadFile();" />
<script type="text/javascript">
var imgCount = 1;
$('.filename').change(function(){
var file = this.files[0];
var id = this.id;
var reader = new FileReader();
reader.onload = function(event) {
var i = document.createElement('img');
i.src = event.target.result;
i.id = 'img'+id;
i.onload = function(){
image_width=$(i).width(),
image_height=$(i).height();
if(image_width > image_height){
i.style.width="320px";
}else{
i.style.height="300px";
}
//i.style.display = "block";
}
$('#img'+id).remove();
$('#box'+id).append(i);
$('#box'+id).prepend('<span class="label">'+$('#btn'+id).val()+'</span>');
$('#btn'+id).hide();
$(document).on('click', '#img'+id, function(){$('#'+id).trigger('click')});
};
reader.onerror = function(event) {
console.error("File could not be read! Code " + event.target.error.code);
};
reader.readAsDataURL(file);
});
function uploadFile(){
var img_data = [];
if(imgCount){
var quality = 0.3;
for(var i=1; i<=3; i++){
if(document.getElementById('img'+i)){
var source_img_obj = document.getElementById('img'+i);
var cvs = document.createElement('canvas');
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL("image/jpeg", quality);
var img_name = $('#btn'+i).val();
img_data.push({index:i, name: img_name, image_data :newImageData});
}
}
var xhr = $.ajax({
url: 'a.php',
type: 'POST',
data: {post_data:img_data},
dataType: 'json'
});
xhr.success(function(response){
console.log(response);
});
}
}
</script>
</body>
</html>
PHP
<?php
$arr = $_POST;
if(isset($arr) && isset($arr['post_data'])){
$arrImageData = $arr['post_data'];
if(is_array($arrImageData)){
for($i=0; $i<count($arrImageData); $i++){
if($arrImageData[$i]['image_data'] != ''){
$varImageData = preg_replace('/^data:image\/(png|jpg|jpeg);base64,/', '', $arrImageData[$i]['image_data']);
$varImageData = base64_decode($varImageData);
$varImageIndex = $arrImageData[$i]['index'];
$varImageName = preg_replace('/[^a-zA-Z0-9]/', '-', $arrImageData[$i]['name']);
$varFileName = $varImageName.'-'.$varImageIndex.'.jpg';
$file = fopen($varFileName, 'wb');
fwrite($file, $varImageData);
fclose($file);
}
}
}
}
Client-side compression (before upload) can only be done via a Java Applet, as far as I know.
Server-side compression (after upload) can be done via PHP ZipArchive class. An example can be found here.
EDIT: In addition to Java Applets, client-side file compression can also be implemented in Flash or Silverlight, but if I understand correctly, this will compress data per file for quicker sending and not create a file archive.
I'm saying apology to ask this repeated Question.
I've tried so many examples for file Uploading finally I wrote the code below.
Once Hyperlink was clicked it is asking file then we select file.
But i want to display the file name in Table , I'm unable to show on table.
<div class="sf_coursehead">
Upload FileList + Add New
<input type="file" id="upload_input" name="courseAgenda" style="font-size: 50px;
width: 120px; opacity: 0; filter: alpha(opacity :0); position: relative; top: -40px;; left: -20px" />
</div>
<table>
<tr>
<td><td>
</tr>
</table>
But how to show selected files in table,that means each selection table will be add new row
So please help me to display file name in table,
give me suggestion.
Edit:
this is also not working..
$("#upload_input").change(function(){
var filename = document.getElementById('id_transactions').val();
alert(filename);
});
This is my Working Code..
<img src="resources/images/profile_image.png" alt="Profile Image"
width="120" height="150" class="prif_img" />
NewImage
<input type="file" id="upload_input" name="courseAgenda"
style="font-size: 50px; width: 120px; opacity: 0; filter: alpha(opacity : 0); position: relative; top: -40px;; left: -20px" onchange="uploadFile_onChange(this);" />
Script:
function uploadFile_onChange(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.prif_img').attr('src', e.target.result).width(120).height(150);
};
reader.readAsDataURL(input.files[0]);
}
}
this code may what you need,
<script>
$(document).ready(function() {
$("#upload_input").change(function() {
var file_name=$("#upload_input").val();
$("#list_files").append("`<tr><td>`"+file_name+"`</td></tr>`');
}); });
</script>
</head> <body>
<table id="list_files"> </table>