Using cropper.js I could crop/resize the image, but is there any way I could, for example, remove the text from the image? or drawing? Then save or download?
Thanks for any help
https://jsfiddle.net/dalinhuang/dsh33tu8/
$('#edit_img').click(function(){
$('#image').cropper({
aspectRatio: 'auto',
crop: function(e) {
}
});
});
$("#reset").click(function() {
$('#image').cropper("reset");
});
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.js"></script>
<button id="edit_img">EDIT IMG</button><br><br>
<button id="reset">RESET</button><br><br>
<div>
<img id="image" src="https://s3.amazonaws.com/dev-resized-image/full/dad3b2b5-1d74-4277-8ee7-fc11196a508c/funny-that-look-pictures-lol.jpg">
</div>
Finally after few days of searching.
Turns out this is the best. Using Adobe API to edit images!!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Load Feather code -->
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'your-api-key-here',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id='injection_site'></div>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'https://i.imgflip.com/ehl86.jpg');" /></p>
<img id='image1' src='https://i.imgflip.com/ehl86.jpg'/>
Related
Hi I'm new to Js so not really sure how to figure this one out. I have a user pictures gallery on my website and I use simple php file upload script to upload pictures for my users. I have a button under each picture to set given image as a profile pic but I'm in need of getting this picture cropped to correct aspect ratio so I tried using Cropper.js. The problem is I can't find a way to pass an image to cropper.js. else than creating an upload form. I've spent days trying to google the way I could use cropperjs without this upload form but can't seem to find a way. It's my first question on stackoverflow any help would be appreciated.
<!DOCTYPE html>
<html>
<head>
<title>PHP Crop Image Before Upload using Cropper JS</title>
<meta name="_token" content="{{ csrf_token() }}">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" integrity="sha256-jKV9n9bkk/CTP8zbtEtnKaKf+ehRovOYeKoyfthwbC8=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js" integrity="sha256-CgvH7sz3tHhkiVKh05kSUgG97YtzYNnWt6OXcmYzqHY=" crossorigin="anonymous"></script>
</head>
<style type="text/css">
img {
display: block;
max-width: 100%;
}
.preview {
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
.modal-lg{
max-width: 1000px !important;
}
</style>
<body>
<div class="container">
<h1>PHP Crop Image Before Upload using Cropper JS - NiceSnippets.com</h1>
<form method="post">
<input type="file" name="image" class="image">
</form>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">PHP Crop Image Before Upload using Cropper JS - NiceSnippets.com</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
$("body").on("change", ".image", function(e){
var files = e.target.files;
var done = function (url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
$("#crop").click(function(){
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$.ajax({
type: "POST",
dataType: "json",
url: "upload.php",
data: {image: base64data},
success: function(data){
console.log(data);
$modal.modal('hide');
alert("success upload image");
}
});
}
});
})
</script>
</body>
</html>
cropping and uploading image using Croppie plugin working fine sample code as follows
<html lang="en">
<head>
<title>PHP and jQuery - Crop Image and Upload using Croppie plugin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.2/croppie.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
.croppie-container .cr-vp-circle
{
border-radius:0
}
.cr-slider-wrap
{
display:none
}
</style>
</head>
<body>
<div class="container">
<div class="card" style="max-height: 500px;">
<div class="card-header bg-info" style="display:none">PHP and jQuery - Crop Image and Upload using Croppie plugin</div>
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<div id="upload-demo"></div>
</div>
<div class="col-md-4" style="padding:5%;">
<strong>Select image to crop:</strong>
<input type="file" id="image">
<button class="btn btn-success btn-block btn-upload-image" style="margin-top:2%">Upload Image</button>
</div>
<div class="col-md-4" style="background: #9d9d9d;">
<div id="preview-crop-image" style="background: #fff;
width: 200px;
margin: 50px 72px;
height: 200px;"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var resize = $('#upload-demo').croppie({
enableExif: true,
enableOrientation: true,
viewport: { // Default { width: 100, height: 100, type: 'square' }
width: 200,
height: 200,
type: 'square' //square
},
boundary: {
width: 300,
height: 300
}
});
$('#image').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
resize.croppie('bind',{
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('.btn-upload-image').on('click', function (event) {
resize.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (img) {
alert(img)
$.ajax({
url: "cropping.php",
type: "POST",
data: {"image":img},
success: function (data) {
html = '<img src="' + img + '" />';
$("#preview-crop-image").html(html);
}
});
});
});
</script>
</body>
</html>
But the result from croppie plugin is getting as canvas i.e base64 but we want the result from croppie plugin as same as file upload so that we can access the cropped image with $_FILES, how it can be achieved please suggest us.
Croppie is using canvas.drawImage(...) to manipulate images so you can not upload the images as you upload a file using a file input field. What you can do is, submit the base64 encoded string and reconstruct(base64 decode) the image in your server.
$imageName = $uuid.".png";
// extracting the base64 encoded string from the request payload
$imageArray = explode(";", $_POST['imagebase64']);
$imageContents = explode(",", $imageArray[1]);
$imagebase64 = base64_decode($imageContents[1]);
// saving the image to a temp file
$tempPath = sys_get_temp_dir()."/".$imageName;
file_put_contents($tempPath, $imagebase64);
Now you have the uploaded image saved in $tempPath
I'm trying to build a script that would allow somebody to enter a custom text and then scale it, change the font, and the color.
It works, everything works, except that it shows has an unexpected behavior: if I click on the canvas outside of the object then the object becomes inactive and then I cannot bring it to become active again.
this is the page:
<head>
<link rel="stylesheet" href="css/googlefonts.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="https://kit.fontawesome.com/589156f3be.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container1st">
<div class="outer2">
<div class="center2">
<span class="tb"><i class="fas fa-terminal"></i> Input text : </span><span><input class="input" data-text="text1" value="text1" id="id_text1" maxlength="30"/></span>
<span class="tb"> | <i class="fas fa-font"></i> Font-family : </span><span><select id="font-family"></select></span>
<span class="tb"> | <i class="fas fa-sliders-h"></i> Font Size : </span><span><input type="range" min="50" max="300" value="50" id="text_size" /></span>
<span class="tb"> | <i class="fas fa-palette"></i> Text color : </span><span><input type="text" id="text_colour" /></span>
<!--<span><button id="unu"> | Try it</button></span>-->
</div>
</div>
<div style="position relative, top: 10%;"> </div>
<div class="outer1">
<div class="center1">
<canvas id="c" width="886" height="621"></canvas><br />
</div>
</div>
<div style="position relative, top: 10%;"> </div>
</div>
<script>
var imageUrl = "img/cadru-01-ok23.png";
var canvas = new fabric.Canvas('c');
var text = "";
canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
// Optionally add an opacity lvl to the image
//backgroundImageOpacity: 0.5,
// should the image be resized to fit the container?
backgroundImageStretch: false
});
// google fonts API key: https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDk3o9XW7qKxy9-Oa1R7IUM2E_iJbmDhj8
// Define an array with all fonts
//var fonts = ["Pacifico", "VT323", "Quicksand", "Inconsolata"];
var fonts = ["Aguafina Script","Akronim","Alex Brush","Anton","Raleway","Modak","Roboto Mono","Merriweather","Noto Sans","Playfair Display","Ubuntu","Titillium Web","Noto Serif","Rubik","Crimson Pro","Inconsolata","Arimo","Quicksand","Heebo","Nunito Sans","Fjalla One","Oxygen","Crimson Text","Bitter","Libre Baskerville","Karla","Cabin","Josefin Sans","Hind","Saira Stencil One","Indie Flower","Source Code Pro","Lobster","Libre Franklin","Arvo","Abel","Mukta","Dancing Script","Varela Round","Pacifico","Farro","Barlow","Shadows Into Light","Abril Fatface","Teko","Monda","Acme"];
//add input box style text area
var text1 = new fabric.Text("Text", {
id: "id_text1",
fontSize: 50,
selectable: false,
left: 100,
top: 100,
text: "text1",
fill: '#000'
});
canvas.add(text1).setActiveObject(text1);
//populate the font dropdown
fonts.unshift('Times New Roman');
// Populate the fontFamily select
var select = document.getElementById("font-family");
fonts.forEach(function(font) {
var option = document.createElement('option');
option.innerHTML = font;
option.value = font;
select.appendChild(option);
});
// Apply selected font on change
document.getElementById('font-family').onchange = function() {
if (this.value !== 'Times New Roman') {
loadAndUse(this.value);
} else {
canvas.getActiveObject().set("fontFamily", this.value);
canvas.requestRenderAll();
}
};
// Load all fonts using Font Face Observer
function loadAndUse(font) {
var myfont = new FontFaceObserver(font)
myfont.load()
.then(function() {
// when font is loaded, use it.
canvas.getActiveObject().set("fontFamily", font);
canvas.requestRenderAll();
}).catch(function(e) {
console.log(e)
alert('font loading failed ' + font);
});
}
//Font Size #text_size
document.getElementById('text_size').onchange = function() {
canvas.getActiveObject().set("fontSize", this.value);
canvas.requestRenderAll();
}
//Text color #text_color
$("#text_colour").spectrum({
color: "#000000",
showPaletteOnly: true,
change: function(color) {
canvas.getActiveObject().set("fill", color.toHexString());
canvas.requestRenderAll();
},
palette: [
['#000000', '#fafafa', '#c5c5c5'],
['red', 'yellow', 'green', 'blue', 'violet', 'black']
]
});
//canvas controls some will be set to false later on
canvas.getActiveObject().hasControls=true;
canvas.getActiveObject().hasRotatingPoint=true;
canvas.getActiveObject().hasBorders=true;
canvas.getActiveObject().editable=true;
//text input on keyup
$('.input').on('keyup', function() {
id = $(this).attr('id');
val = $(this).attr('data-text');
newtext = $(this).val();
input = $(this);
canvas.getActiveObject().set("text", newtext);
canvas.renderAll();
});
</script>
<script src="http://rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>
</body>
Link with working example: http://fradoti.fr/000/
I'm not getting any javascript errors either. Any help pointing out what I'm doing wrong would be much appreciated.
I've got this code and i have to make it work without the text in the textarea.
So the code which is written in the textarea should be in the script tag and it should work. Can anybody help me because i dont really know how the eval(document.getElementById('code').value works so i dont know how to integrate it. Here is the code i am talking from:
<html>
<head>
<title>GEarthExtensions Samples - Drawing an extruded polygon</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAsc0UQXoo2BnAJLhtpWCJFBTgHOxFyKCf35LCvsI_n4URElrkIhS9MkSlm_0NZWgrKFkOsnd5rEK0Lg" type="text/javascript"></script>
<script src="extensions-0.2.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
var ge = null;
var gex = null;
google.load('earth', '1');
google.setOnLoadCallback(function() {
google.earth.createInstance('map3d', function(pluginInstance) {
ge = pluginInstance;
ge.getWindow().setVisibility(true);
gex = new GEarthExtensions(pluginInstance);
//gex.util.lookAt([0, 0], { range: 800000, tilt: 65 });
}, function() {});
});
/* ]]> */
</script>
</head>
<body>
<div id="map3d_container" style="width: 500px; height: 500px;">
<div id="map3d" style="height: 100%"></div>
</div>
<textarea id="code" style="font-family: monospace; width: 500px; height: 200px;">
gex.dom.clearFeatures();
var placemark = gex.dom.addPlacemark({
polygon: {
polygon: [],
extrude: true,
altitudeMode: geo.ALTITUDE_ABSOLUTE
},
style: {
line: { width: 0 },
poly: '#ff0'
}
});
var coords = placemark.getGeometry().getOuterBoundary().getCoordinates();
gex.edit.drawLineString(placemark.getGeometry().getOuterBoundary(), {
drawCallback: function(coordIndex) {
var coord = coords.get(coordIndex);
coords.setLatLngAlt(coordIndex,
coord.getLatitude(), coord.getLongitude(), 100000);
}
});
</textarea><br/>
<input type="button" onclick="eval(document.getElementById('code').value);" value="Run"/>
</body>
</html>
To run the code in script tag, you need to parse it first. DOMParser is a nice tool for that:
function run(value) {
var parser = new DOMParser();
var doc = parser.parseFromString(value,"text/html"); // create DOM from value
var code = doc.getElementsByTagName("script"); // get script tags from that DOM
if(!code.length) eval(value); // no script tag, eval the value directly
else eval(code[0].innerText); // eval the text from the first script tag
}
Test HTML code
<textarea id="code">
<script>
alert("hello");
</script>
</textarea>
<button onclick="run(document.getElementById('code').value)">Run</button>
I have the following code...
Once an image is clicked it is animated (e.g. Resized and moved) to look like it is flipping over to reveal another image. This works perfectly fine when the code is applied to images, but when I want to apply it to a containing div, that contains tags and a few more images, all goes wrong.
THIS WORKS:
<img alt="" src="image_1.jpg" id="image1" />
<img alt="" src="images_2.jpg" id="image2" />
JS
$(document).ready(function() {
var margin = $("#image1").width()/2;
var width = $("#image1").width();
var height = $("#image1").height();
$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#image1").click(function(e) {
e.preventDefault();
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
$("#image2").click(function(e) {
e.preventDefault();
$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
window.setTimeout(function() {
$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
},500);
});
});
THIS DOESN'T WORK
<div class="containerOne">
<img src="image_1.jpg" alt="" />
<img src="image_3" alt="" />
</div>
<div class="containerTwo">
<img src="image_2" alt="" />
</div>
JS
$(document).ready(function(){
var margin = $(".containerOne").width()/2;
var width = $(".containerOne").width();
var height = $(".containerOne").height();
$(".containerTwo").stop().css({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
});
$(".departmentProducts").click(function(e) {
e.preventDefault();
$(this).find('.containerOne').stop().animate({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
}, { duration:500 });
window.setTimeout(function() {
$(".containerTwo").stop().animate({
width:''+width+'px',
height:''+height+'px',
marginLeft:'0px',
opacity:'1'
},{ duration:500 });
},500);
});
$(".departmentProduct").click(function(e) {
e.preventDefault();
$(this).find('.containerTwo').stop().animate({
width:'0px',
height:''+height+'px',
marginLeft:''+margin+'px',
opacity:'0.5'
},{ duration:500 });
window.setTimeout(function() {
$(".containerOne").stop().animate({
width:''+width+'px',
height:''+height+'px',
marginLeft:'0px',
opacity:'1'
},{ duration:500 });
},500);
});
});
See this jQuery plugin here. Named Flippy and seems to be lightweight.
Your code look well, but i think that you are using animate() on your div container of
, you image not change his visual properties, because his properties steel the same, I recomend to you check this link https://api.jquery.com/animate/ ,
look this simple example how animate a div.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
background-color: #bca;
width: 100px;
border: 1px solid green;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="go">» Run</button>
<div id="block">Hello!</div>
<script>
// Using multiple unit types within one animation.
$( "#go" ).click(function() {
$( "#block" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
</script>
</body>
</html>
Hope Hepls.