Pegar o crop e enviar para servidor

Williams Duarte · Março 20, 2014

Olá galera,

Não é meu forte javascript, porem estou horas tentando entender este código, ele gera uma imagem para recortar sem upload para o servidor, muito top por sinal, até ai ele é diferente dos que conheço.

O meu problema é que não consigo pegar o name ou sei lá o que que ele gera e enviar para o servidor para fazer upload do crop.

vou postar aqui todo o código que tenho e se alguém consegue fazer este script enviar a imagem para o servidor eu agradeço, e se conseguir fique a vontade para usa-lo também!! :kiss:

desde já agradeço

index.html

<!DOCTYPE html><html lang="en"><head>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	<meta charset="utf-8">	<title>jQuery & Canvas Image Cropper</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">	<link rel="icon" href="data:,">	<link rel="stylesheet" type="text/css" href="example.css">	<link rel="stylesheet" type="text/css" href="crop.css">	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>	<script src="crop.min.js"></script></head><body style="">	<input type="file" class="uploadfile" id="uploadfile">	<div class="newupload">Upload an image?</div>	<div class="example">		<!--			NOTE: To change the aspect ratio, look in crop.css			The class 'default' links the div to the innit(); function		-->		<div class="default">			<div class="cropMain"></div>			<div class="cropSlider"></div>			<button class="cropButton">Crop</button>		</div>	</div>	<article>		<header>			<h1>jQuery & Canvas <em>Image Crop</em> <span class="version">v2</span></h1>			<p>A cropper for when you need images to be a specific size. It works using a predetermined aspect ratio. The UI differs from other croppers, here you may drag the image into position and even resize it.</p>		</header>		<section>			<h2>Touchescreen Compatible!</h2>			<ul>				<li>Works in all the major browsers, including IE8+ and mobile.</li>				<li>Cropping and resizing is done through Canvas. No backend scripting required.</li>				<li>Minimal code. Doesn't require jQuery UI.</li>				<li>The UI differs drastically from traditional image croppers.</li>				<li>Idiot-proof. I've added precautions to insure the computer  illiterate don't break it. For example, if the image proporations do not scale to the predetermined aspect ratio, then the image will automatically zoom in until it does scale.</li>				<li>Aspect ratio is easily changable through CSS. You haven't got to touch any JavaScript.</li>				<li>Custom styles. The code is barebones, it's very easy to style.</li>			</ul>		</section>	</article><script>function loadImageFile() {    if (document.getElementById("uploadfile").files.length === 0) return;    var e = document.getElementById("uploadfile").files[0];    if (!rFilter.test(e.type)) {        return    }    oFReader.readAsDataURL(e)}var one = new CROP;one.init(".default");one.loadImg("example.jpg");$("body").on("click", "button", function () {    $("canvas").remove();    $(".default").after('<canvas width="240" height="240" id="canvas"/>');    var e = document.getElementById("canvas").getContext("2d"),        t = new Image,        n = coordinates(one).w,        r = coordinates(one).h,        i = coordinates(one).x,        s = coordinates(one).y,        o = 240,        u = 240;				//window.alert(one);				$.ajax({			type:"GET",			url:"ajax_image.php?t=ajax&img="+e+"&w="+n+"&h="+r+"&x1="+i+"&y1="+s+"&o="+o+"&u="+u,			cache:false,			success:function(rsponse)			{				//			}		});		    t.src = coordinates(one).image;    t.onload = function () {        e.drawImage(t, i, s, n, r, 0, 0, o, u);        $("canvas").addClass("output").show().delay("4000").fadeOut("slow")    }	});$("body").on("click", ".newupload", function () {    $(".uploadfile").click()});$("body").change(".uploadfile", function () {    loadImageFile();    $(".uploadfile").wrap("<form>").closest("form").get(0).reset();    $(".uploadfile").unwrap()});oFReader = new FileReader, rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;oFReader.onload = function (e) {    $(".example").html('<div class="default"><div class="cropMain"></div><div class="cropSlider"></div><button class="cropButton">Crop</button></div>');    one = new CROP;    one.init(".default");    one.loadImg(e.target.result)}</script></body></html>

ajax_image.php

<?php$t_width = 90;	// Maximum thumbnail width$t_height = 128;	// Maximum thumbnail height$new_name = "small.jpg"; // Thumbnail image name$path = "uploads/";if(isset($_GET['t']) and $_GET['t'] == "ajax"){	extract($_GET);	$ratio = ($t_width/$w); 	$nw = ceil($w * $ratio);	$nh = ceil($h * $ratio);	$nimg = imagecreatetruecolor($nw,$nh);	$im_src = imagecreatefromjpeg($path.$img);	imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);	imagejpeg($nimg,$path.$new_name,90);	}

crop.min.js

crop.css

/*---------------------------------------------------------*/

/*

/* set the aspect ratio

/*

/* the cropper has a 40px offset

/* this means 80px will be subtracted from the image height and width

/*

/* the class .one must match the class written into one.init('.one');

/*

/*---------------------------------------------------------*/

.default .cropMain {

width:320px;

height:320px;

}

/*---------------------------------------------------------*/

/* cropper styling begins here...

/*---------------------------------------------------------*/

.cropMain {

background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///5EjRxiAGMgCCCAGFB5AADGCRBgYjh49CiRZIJS1tTWQBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwARxT7aD6kRXAAAAABJRU5ErkJggg==') repeat;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);

box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.5);

}

.cropMain .crop-img { position: absolute }

.cropMain .crop-container {

overflow: hidden;

position: relative;

}

.cropMain .crop-container:after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 5999;

opacity: .75;

filter: alpha(opacity=7);

-webkit-box-shadow: inset 0 0 0 40px white,inset 0 0 0 41px rgba(0,0,0,.1),inset 0 0 20px 41px rgba(0,0,0,.2);

box-shadow: inset 0 0 0 40px white,inset 0 0 0 41px rgba(0,0,0,.1),inset 0 0 20px 41px rgba(0,0,0,.2);

}

.cropMain .crop-overlay {

position: relative;

cursor: move;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

/*---------------------------------------------------------*/

/* slider bar styling

/*---------------------------------------------------------*/

.cropSlider .noUi-target * {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

-webkit-touch-callout:none;

-ms-touch-action:none;

-webkit-user-select:none;

-moz-user-select:none;

-ms-user-select:none;

cursor:default

}

.cropSlider .noUi-base {

margin: 25px 10px;

height: 7px;

border-radius: 4px;

background-color: #bbb;

cursor:pointer;

position:relative;

z-index:1

}

.cropSlider .noUi-handle {

width: 16px;

height: 16px;

background: #fff;

box-shadow: 0 1px 3px rgba(0,0,0,0.4), inset 0 -4px 8px rgba(0,0,0,0.10);

cursor: move;

border-radius: 4px;

margin:-5px 0 0 -8px

}

.cropSlider .noUi-active {

}

.cropSlider .noUi-connect {

background:Teal

}

.cropSlider .noUi-background {

background:#bbb

}

.cropSlider .noUi-origin-lower {

background:#eee;

}

.cropSlider .noUi-origin {

position:absolute;

right:0;

top:0;

bottom:0;

z-index:0;

border-radius:inherit

}

.cropSlider .noUi-origin-upper {

background:inherit!important

}

.cropSlider .noUi-z-index {

z-index:10

}

.cropSlider .noUi-vertical {

width:40px;

height:100%

}

.cropSlider .noUi-vertical .noUi-origin {

bottom:0;

left:0

}

.cropSlider .noUi-vertical .noUi-handle {

margin:-23px 0 0 -3px

}

.cropSlider .noUi-target[disabled] .noUi-base {

background: #ccc;

box-shadow: none;

}

.cropSlider .noUi-target[disabled] .noUi-connect {

background: #ccc;

box-shadow: none;

}

.cropSlider .noUi-state-tap .noUi-origin {

-webkit-transition:left .3s, top .3s;

transition:left .3s, top .3s

}

/*---------------------------------------------------------*/

/* crop button styling

/*---------------------------------------------------------*/

.cropButton {

background-color: #fff;

background-image: -webkit-linear-gradient(top, #fff 0, #e6e6e6 100%);

background-image: -moz-linear-gradient(top, #fff 0, #e6e6e6 100%);

background-image: -ms-linear-gradient(top, #fff 0, #e6e6e6 100%);

background-image: -o-linear-gradient(top, #fff 0, #e6e6e6 100%);

background-image: linear-gradient(top, #fff 0, #e6e6e6 100%);

border: 1px solid #d3d3d3;

color: #7c7c7c;

-moz-box-shadow: 0 1px 1px #b0afaf;

-o-box-shadow: 0 1px 1px #b0afaf;

-webkit-box-shadow: 0 1px 1px #b0afaf;

box-shadow: 0 1px 1px #b0afaf;

font-weight: normal;

font-size: 12px;

text-shadow: 1px 1px 1px #f5f5f5;

height: 25px;

width: auto;

padding: 0 15px;

cursor:pointer;

border-radius:5px;

}

.cropButton:hover {

color: #0b94c8;

background-color: #fff;

background-image: -webkit-linear-gradient(top, #fff 0, #f0eeee 100%);

background-image: -moz-linear-gradient(top, #fff 0, #f0eeee 100%);

background-image: -ms-linear-gradient(top, #fff 0, #f0eeee 100%);

background-image: -o-linear-gradient(top, #fff 0, #f0eeee 100%);

background-image: linear-gradient(top, #fff 0, #f0eeee 100%);

}

.cropButton:active {

-moz-box-shadow: inset 0 3px 5px #e6e6e6;

-o-box-shadow: inset 0 3px 5px #e6e6e6;

-webkit-box-shadow: inset 0 3px 5px #e6e6e6;

box-shadow: inset 0 3px 5px #e6e6e6;

}

example.css

@charset "UTF-8";

@font-face {

font-family: 'Cantora One';

font-style: normal;

font-weight: 400;

src: local('Cantora One'), local('CantoraOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/cantoraone/v2/2Tarv7Qs4oCEU-xItQ7PXYbN6UDyHWBl620a-IRfuBk.woff) format('woff');

}

@font-face {

font-family: 'PT Serif';

font-style: normal;

font-weight: 400;

src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v4/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');

}

/*-----------------------------------------------------------------------------------*/

/* resets

/*-----------------------------------------------------------------------------------*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;text-decoration:none;font-weight:400;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}*{outline:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased}button::-moz-focus-inner{border:0}

/*-----------------------------------------------------------------------------------*/

/* examples

/*-----------------------------------------------------------------------------------*/

.example {

padding:40px;

position:absolute;

text-align:center;

}

.example .default {

display:inline-block;

margin-right:25px;

z-index:99999;

position:absolute;

}

.output {

position:absolute;

z-index:55555;

top:80px;

left:400px;

box-shadow:0 0 0 100000px rgba(255,255,255,0.9);

}

.newupload {

border: 3px dashed rgba(0,0,0,0.04);

background: rgba(0,0,0,0.02);

width: 320px;

display: block;

margin-left:40px;

margin-top: 40px;

padding: 20px;

box-sizing:border-box;

text-align:center;

font-family:'PT Serif';

font-size: 18px;

color: rgba(0,0,0,0.5);

cursor:pointer;

}

.newupload:hover {

background: rgba(0,0,0,0.01);

}

#uploadfile { display:none }

/*-----------------------------------------------------------------------------------*/

/* main

/*-----------------------------------------------------------------------------------*/

body {

background: white;

font-size: 0;

font-family: 'PT Serif', serif;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Cantora One', sans-serif;

}

article a {

color:#2394c8;

border-bottom: 1px solid #eee;

}

article a:hover { color:#2cb6f7 }

article {

padding:40px;

display:block;

position:absolute;

top: 0;

left: 370px;

}

/*-----------------------------------------------------------------------------------*/

/* header

/*-----------------------------------------------------------------------------------*/

h1 { font-size:45px }

h1 em { color:#8aca4c }

.version{

font-size: 10px;

background: #ededed;

padding: 5px;

position: relative;

top: -15px;

left: 5px;

color:#888;

}

article header p {

margin: 15px 0;

font-size: 20px;

line-height: 30px;

color: #888;

}

article .details {

display: block;

margin-top: 20px;

font-size: 14px;

line-height: 16px;

color: #888;

}

article del { text-decoration:line-through }

/*-----------------------------------------------------------------------------------*/

/* sections

/*-----------------------------------------------------------------------------------*/

section {

padding-top:30px;

padding-bottom:30px;

}

section h2 {

font-size:32px;

padding-bottom:15px;

margin-bottom:20px;

border-bottom: 1px solid #eee;

}

section h3 {

font-size:20px;

line-height:26px;

margin:25px 0 15px 0;

}

section h4 {

font-size:16px;

line-height:20px;

margin:15px 0 5px 0;

}

section > p {

font-size: 16px;

line-height: 24px;

color: #4e4e4e;

margin-bottom:15px;

}

section > ul li {

list-style-type: square;

list-style-position: inside;

font-size: 16px;

line-height: 24px;

color: #757575;

}

section strong {

font-weight: bold;

}

section em {

font-style: italic;

}

section img {

margin: 10px 0;

}

.buy {

margin-top:10px;

-moz-border-radius: 4px;

-ms-border-radius: 4px;

-o-border-radius: 4px;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-transition: all 0.2s linear;

-o-transition: all 0.2s linear;

-webkit-transition: all 0.2s linear;

-ms-transition: all 0.2s linear;

transition: all 0.2s linear;

height: 40px;

width: 200px;

text-align: center;

color: #fff;

border: none;

font-size: 18px;

font-family:'PT Serif';

background-color: #ec5d59;

background-image: -webkit-linear-gradient(top, #ec5d59 0, #c33d36 100%);

background-image: -moz-linear-gradient(top, #ec5d59 0, #c33d36 100%);

background-image: -ms-linear-gradient(top, #ec5d59 0, #c33d36 100%);

background-image: -o-linear-gradient(top, #ec5d59 0, #c33d36 100%);

background-image: linear-gradient(top, #ec5d59 0, #c33d36 100%);

-moz-box-shadow: inset 0 2px 5px rgba(0,0,0,0.20), 0 3px 0 0 #94302a, 0 7px 5px rgba(0,0,0,0.10);

-o-box-shadow: inset 0 2px 5px rgba(0,0,0,0.20), 0 3px 0 0 #94302a, 0 7px 5px rgba(0,0,0,0.10);

-webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,0.20), 0 3px 0 0 #94302a, 0 7px 5px rgba(0,0,0,0.10);

box-shadow: inset 0 2px 5px rgba(0,0,0,0.20), 0 3px 0 0 #94302a, 0 7px 5px rgba(0,0,0,0.10);

text-shadow: #94302a 0 1px 1px;

cursor:pointer;

padding:6px 10px;

}

.btn:hover {

-moz-box-shadow: inset 0 2px 5px rgba(0,0,0,0.20);

-o-box-shadow: inset 0 2px 5px rgba(0,0,0,0.20);

-webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,0.20);

box-shadow: inset 0 2px 5px rgba(0,0,0,0.20);

color:white;

}

.btn:active {

-moz-box-shadow: none;

-o-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

text-shadow: none;

background: #202020;

}

/* syntax highlight

================================================== */

pre,

code {

font-family:'Droid Sans Mono', monospace;

padding:0;

font-size:12px;

line-height:14px;

white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;

margin:15px 0 20px 0;

}

pre .nocode {background-color:none;color:#363636}

.str { color: #DD0000; }

.kwd { color: #007700; }

.com { color: #FF8000; font-style:italic; }

.typ { color: #0000BB; }

.lit { color: #0000BB; }

.pun { color: #007700; }

.pln { color: #0000BB; }

.tag { color: #008; }

.atn { color: #606; }

.atv { color: #080; }

.dec { color: #606; }

pre li{list-style-type:decimal;list-style-position:inside;color:#c1c1c1}

pre li:hover{background:#f8fbff}

up! ;)

William Bruno · Março 20, 2014

Envie a imagem em si, e não o name dela(pq isso é impossível).

Com o próprio FileReader que está ai vc consegue fazer isso. (depois do canvas gerar uma imagem válida para vc)

Entrar

Arquivado

Pegar o crop e enviar para servidor

Recommended Posts

Williams Duarte 431

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante