let user manually crop image with specific size as output - javascript

I'm trying to find some plugin on tutorial on the following:
I want that users on my website can upload an image, which will be used as thumbnail,
though the tumbnails has a specific hight/width, so the image should be cropped.
Though because those images will be images of the persons themselves, I cannot simply autocrop it. I need something that gives the user the possibility to choose which part of the image will be used. So that they can just select their head as profile image for example.
Thanks in advance!

In php & imagejpg (uses GD) you could do:
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = $targ_h = 150;
$jpeg_quality = 80;
$src = 'upload/test.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
imagejpeg($dst_r, 'path/to/output.jpg', $jpeg_quality);
exit;
}
Instead of GD you could also use ImageMagick to do your server-side processing based on the canvas-coordinates you send back to the server.
However... you could also send the raw data from canvas.. canvas can render jpg (client-side) to, then you base64 encode it and upload it (again, but this time as the thumbnail that was created in canvas).
Hope this helps!

Related

How to show only image on the url not other content even html?

I wan't to know "How to show only image on the url not other content even html?". Like see this url link of Image. This url only shows image not any other content on webpage and also see the url of website it's dynamic url not a specific image url.
So, how to achieve that?
You simply make the request to the URL of the image.
For example, if your image is called test1.png and you have it in a directory called images, you would make the URL like this:
https://your.domain/images/test1.png
If you want to hide the full path to the images and serve them through a page (so you have some control over the request for some reason), you can do something more like the following. Let's call the PHP page img.php. And the request could be like
https://your.domain/img.php/test1
<?php
$request = './default.png';
if (isset($_SERVER['PATH_INFO'])){
$request = './images'.$_SERVER['PATH_INFO'].'.png';
if (! file_exists($request)){
$request = './default.png';
}
}
// we now know we have a valid request and the file was found
header('Content-type: image/png');
header('Content-Length: '.filesize($request));
echo file_get_contents($request);
exit;
?>
With this approach you could have any number of images in the /images/ directory and serve them if they match the request.
The website in your sample maybe using the same $_SERVER['PATH_INFO'] info approach but would be dynamically creating the image using the passed variables and explode('/',$_SERVER['PATH_INFO']) along with imagecreate()
A very quick hack version would be something like the following. The request would be like this:
https://your.domain/test.php/100x50/919/222
And the very quick code, with almost no error checking could be:
<?php
function hexToColor($hx){
$rgb = array(0,0,0);
if (strlen($hx) == 3){
$rgb[0] = hexdec($hx[0].$hx[0]);
$rgb[1] = hexdec($hx[1].$hx[1]);
$rgb[2] = hexdec($hx[2].$hx[2]);
} else {
$rgb[0] = hexdec($hx[0].$hx[1]);
$rgb[1] = hexdec($hx[2].$hx[3]);
$rgb[2] = hexdec($hx[4].$hx[5]);
}
return $rgb;
}
// default values
$sizeW = 100;
$sizeH = 100;
$bg = array(0,0,0);
$fg = array(255,255,255);
if (isset($_SERVER['PATH_INFO'])){
$opts = explode('/',substr($_SERVER['PATH_INFO'],1));
$bgSet = false;
foreach($opts as $k => $v){
// check for a width x height request
if (strpos($v,'x')){
$tmp = explode('x',$v);
$sizeW = $tmp[0];
$sizeH = $tmp[1];
} elseif ($bgSet){
// must be a foreground request
$fg = hexToColor($v);
} else {
$bg = hexToColor($v);
$bgSet = true;
}
}
}
header("Content-Type: image/png");
$im = #imagecreate($sizeW,$sizeH)
or die("Cannot Initialize new GD image stream");
$background_color = imagecolorallocate($im,$bg[0],$bg[1],$bg[2]);
$text_color = imagecolorallocate($im,$fg[0],$fg[1],$fg[2]);
imagestring($im,1,5,5,$sizeW.' x '.$sizeH,$text_color);
imagepng($im);
imagedestroy($im);
exit;
?>
But I would strongly recommend a heap of error checking before using that code!
As I understand you want to dynamically update the picture.
You can see that on their main website they created a form for the entered values:
After that, on the picture URL there are all the values you need to display this image:
https://dummyimage.com/600x400/8a1a8a/232dba&text=xzcxzcnbngh
which is this image:
what you can't see is their server side, which takes the parameters 600x400/8a1a8a/232dba&text=xzcxzcnbngh, creates a picture using their server and returning it to you.
I'll suggest you to create a server side that will return a picture and text based on the given parameters.
based on your server you will need to find out how to create the picture and return it.
As you can see here, I just modified the "src" value of the and it changed the text on the photo.
which means that their server receives the request and send back the image.
If you want a simple solution you could just send back those parameters to your page scripts, and create this image element using JavaScript.
That way, your html code will be clean without even the img element tag.
create your img in JS and send put it on the html body.
Image placeholder that’s updated by scripting
HTML code:
<img id="abc" src="">
Javascript code:
var abcImage = document.getElementById('abc');
abcImage.src = 'https://dummyimage.com/600x400/000/fff';

How to crop images automatically in the browser using javascript or jquery

Someone posted a great way to crop images via php. I implemented it to crop 12 photos in rectangulars:
PHP:
$count=count( $_FILES['photo']['tmp_name'] );
for($i=0;$i<$count;$i++){
$image=$_FILES['photo']["tmp_name"][$i];
$imagename=$_FILES['photo']["name"][$i];
move_uploaded_file($image,'images/'.$imagename);
$imglocation='images/'.$imagename;
$sizes = getimagesize($imglocation);
$imgwidth = $sizes[0];
$imgheight = $sizes[1];
if($imgwidth<$imgheight){
$imgheight=$imgwidth;
}
elseif($imgheight<$imgwidth){
$imgwidth=$imgheight;
}
$j=$i+1;
$imageCrop = new ImageCrop();
if ($imageCrop->openImage($imglocation)) {
$imageCrop->crop($imgwidth, $imgheight); //newWidth, newHeight
$imageCrop->save('data'.$j.'.png');
}
}
Now I want to preview the cropped image in the browser. Since I will be using sessions, I don't want to use the saved images on the server, it would be vulnerable to work with it in javascript. Is there a way to get the uploaded files and crop them the same way in javascript?

How to encrypt and decrypt image files online?

I'm working on a web application that involves loading images into a canvas object, then manipulating those images beyond recognition. I need to hide the original source image file (a jpeg) so that the user on the client side should not be able to use dev tools to see the original image.
I have tried to encode the images as a base64 and load it via a JSON data file, but even with this method, the inspector tool still shows the original image file (when it is set as the src of my javascript image object). Is there some way that I can encrypt and decrypt the image files, so that the user has no way of seeing the original image (or have it be some garbled image, for example)? Preferably I'd like to do this on the client side, as all my code is client side at the moment. Thanks in advance!
Here is my code for loading the base64 encoded image data via a JSON file:
//LOAD JSON INSTEAD?
$.getJSON( "media/masks.json", function( data ) {
console.log("media/masks.json LOADED");
//loop through data
var cnt = 0;
for (var key in data)
{
if (data.hasOwnProperty(key))
{
// here you have access to
//var id = key;
var imgData = data[key];
//create image object from data
var image = new Image();
image.src = imgData;
console.log('img src: '+ imgData);
var elementId = $scope.masks[cnt].id;
// copy the images to canvases
imagecanvas = document.createElement('CANVAS');
imagecanvas.width = image.width;
imagecanvas.height = image.height;
imagecanvas.getContext('2d').drawImage(image,0,0);
imageCanvases[elementId] = imagecanvas;
}
cnt++;
}
});
This is what I see in the Chrome dev tools Network inspector (exactly what I'm trying to avoid):
I need to hide the original source image file (a jpeg) so that the user on the client side should not be able to use dev tools to see the original image.
That's not possible. There is always a way to get at the image using developer tools. Even if there wasn't, a simple screen capture would defeat whatever measures you put in place.

Can we save canvas image in system also like direct download image when we click save

Hello I have done project in that i can save image like downloading in to div then right click on that it displays save as image,I don't want to do like that. I want download image directly not like the above at the same time i want to save image path in database using SQL server and mvc3 web application.How to save in database I need to use any server side code.
I Google it but couldn't find any relevant answer.
Is it possible what i asked if so can any one guide me.
Thanks in advance.
below code is for saving image and i need to change it.
function downloadCanvas() {
var canvas = stage.children[0].canvas;
var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);
document.body.appendChild(oImgPNG);
}
When I search in Google every one is using php code.
how to use php code in html5.
Via Ajax send data to server and then save as image,
var canvasData = canvas.toDataURL("image/png");
var ajax = new XMLHttpRequest();
ajax.open("POST",'save.php',false);
ajax.setRequestHeader('Content-Type', 'application/upload');
ajax.send(canvasData);
PHP,
<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
// Get the data
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$random_digit=md5(uniqid(mt_rand(), true));
$fp = fopen( 'yourfolder/new'.$random_digit.'.png', 'wb' );
fwrite( $fp, $unencodedData);
fclose( $fp );
//Now save the path in database!
}
?>
The image will be saved at "yourfolder/new'.$random_digit.'.png'".
Link to same question,
Sending photo from javascript to server
You have to send the image data to the server with an ajax call to the web server, like the following :
http://www.dotnetfunda.com/articles/article1662-saving-html-5-canvas-as-image-on-the-server-using-aspnet.aspx
Then, depending on the image size, store the URL of the image into SQL Server (if small image) OR store the data. Read this to help you make your choice : Save image url or save image file in sql database?

HTML5 - Attach image to mail using Java EE

I am developing an a drawing application using Javascript.
Users will be able to draw on a canvas. Once they are done with drawing, they will be able to convert it into an image (Convert to image button).
This is the code:
function putImage()
{
var canvas1 = document.getElementById("canvas");
if (canvas1.getContext)
{
var ctx = canvas1.getContext("2d");
var myImage = canvas1.toDataURL("image/png");
}
var imageElement = document.getElementById("MyPix");
imageElement.src = myImage;
$('#submit_btn').closest('.ui-btn').show();
}
There's a submit button and when the users click on it, the application will redirect to another page whereby the user will be able to send an email (using java mail) with the image attached to it.
The page allows user to type in the email address that they wanna send to, and the body of the email.
May i know how to make the image auto-attach to the email so that the after the user type in the email address and the body, they will be able to send the mail?
Thanks in advance!
To send the image as an attachment with javamail, you need the bytes from say a jpg or bmp. What you'll need to do is send the model, eg the coordinates, to the server and recreate the image server side. Perhaps a html5 canvas has direct support for outputting the images as bytes, I don't know, but that would help. In that case you'd simply transfer those bytes to the server for attaching to the mail.
HTML5 Canvas has a cool api trick to do this:
var encodedImage = canvas1.toDataURL(); //this generates base64 encoded image in png
//for jpeg
var encodedImage = canvas1.toDataURL("image/jpeg");
Now you can store that encodedImage in back-end in a table or file. If you want to show it on a page, just assign it back to html img tag to source property

Categories