Exemple de code simple pour recadrer et stocker des images à l'aide de Javascript

Le recadrage des images nous est très familier. J'ai de nouveau rencontré ce besoin au travail récemment, j'ai donc pensé que je pourrais simplement le régler. La méthode peut être référencée par tout le monde et par moi-même en cas de besoin, donc cet article la présente principalement. Afin de réaliser une implémentation simple utilisant Javascript pour recadrer les images et les stocker, j'utilise le framework THINKPHP pour le traitement PHP back-end. Les amis dans le besoin peuvent s'y référer.

Avant-propos

En ce qui me concerne, il n'y a pas beaucoup de parties de la page dont la conception est plus flexible, comme le glissement codes de vérification et recadrage d’image. En attendant une meilleure conception d’interaction.

Quand j'ai commencé à travailler, je voulais comprendre ces choses, mais je n'en ai jamais eu besoin, j'ai profité du temps libre d'aujourd'hui et je l'ai étudié tout l'après-midi, j'ai rencontré des problèmes de toutes tailles, et je m'y suis préparé. Être torturé reflète en fait un problème. Mon

est encore relativement faible.

Obtenir l'effet :

Une fois que l'utilisateur a cliqué pour télécharger l'image, la page affiche l'image téléchargée, ainsi qu'une zone de recadrage et deux des zones d'aperçu apparaissent. Enfin, cliquez sur le bouton de recadrage pour enregistrer l'image recadrée sur le serveur.

L'effet est très simple. Il y a deux difficultés que j'ai rencontrées dans tout le processus. La première est l'effet de recadrage JS et la seconde est le traitement des données d'image.

Pour la première question, j'ai cité un plug-in sur Internet. À mon avis, la satisfaction des utilisateurs concernant le processus de recadrage ne peut être considérée que comme moyenne, car elle ne peut être que moyenne. recadrer les zones carrées, même s'il y a huit réglages de traction sur la bordure, le cadre s'adapte toujours en fonction du carré lors du tirage du cadre, ce qui ne me convient pas très bien.

La méthode de mise en œuvre est la suivante :

Ce qui suit est une conception de page simple :

<p style="float:left;"><img id="target"></p>
<p style="width:48px;height:48px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview" ></p>
<p style="width:190px;height:195px;margin:10px;overflow:hidden; float:left;"><img style="float:left;" id="preview2" ></p>
<form action="{:U(&#39;/test/crop_deal&#39;)}" method="post" onsubmit="return checkCoords()" enctype="multipart/form-data" id="form">
<input type="file" name="file" onchange="change_image(this)">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="submit" value="裁剪"/>
</form>

Voici le code JS :

function change_image(file){
var reader = new FileReader();
reader.onload = function(evt){
$("#target").attr('src',evt.target.result);
$('#preview').attr('src',evt.target.result);
$('#preview2').attr('src',evt.target.result);
// $('#target').css({"height":"600px","width":"600px"});
// 限制了大小会影响到截图的效果
};
reader.readAsDataURL(file.files[0]);

var jcrop_api, boundx, boundy;

setTimeout(function(){


$('#target').Jcrop({
minSize: [48,48],
setSelect: [0,0,190,190],
onChange: updatePreview,
onSelect: updatePreview,
onSelect: updateCoords,
aspectRatio: 1
},
function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});

function updatePreview(c){
if (parseInt(c.w) > 0)
{
var rx = 48 / c.w; //小头像预览p的大小
var ry = 48 / c.h;

$('#preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
{
var rx = 199 / c.w; //大头像预览p的大小
var ry = 199 / c.h;
$('#preview2').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};


function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};

},500);

}

Voici deux rappels :

Un : N'oubliez pas Introduisez un plug-in en tête de page :

　　<script src="/plug/js/jquery.min.js" type="text/javascript"></script>
　　<script src="/plug/js/jquery.Jcrop.min.js" type="text/javascript"></script>
　　<link rel="stylesheet" href="/plug/css/Jcrop.css" rel="external nofollow" type="text/css" />

Deuxièmement : Certaines personnes aux yeux perçants ont peut-être vu un timing dans JS, et en même temps elles sont confuses. N'est-ce pas un peu inutile ? En fait non, il faut du temps pour télécharger l'image sur JS et la charger sur la page. Le sens de ce timing est d'attendre que l'image soit chargée sur la page par JS avant de charger l'effet de recadrage. Ceci est également obtenu après des expériences répétées. pratiques.

J'utilise le framework THINKPHP pour le traitement PHP back-end La version est 3.1.3

Collez le code :

Ici. est l'appel Il existe une série de méthodes pour créer des images dans la bibliothèque GD. La plus importante est

function crop_deal(){
　　ob_clean();
　　import ( 'ORG.Net.UploadFile' );
　　$upload = new UploadFile ();
　　$upload->maxSize = 2000000;
　　$upload->allowExts = array (
　　　　'jpg',
　　　　'gif',
　　　　'png',
　　　　'jpeg'
　　);
　　$upload->savePath = './upload/test/';
　　$upload->autoSub = true;
　　$upload->subType = 'date';
　　$upload->dateFormat = 'Ymd';
　　if ($upload->upload () ) {
　　　　$info = $upload->getUploadFileInfo();
　　　　$new_path = "./upload/test/thumb".date('Ymd');
　　　　$file_store = $new_path."/".date('YmdHis').".jpg";
　　　　if(!file_exists($new_path)){
　　　　　　mkdir($new_path,0777,true);
　　　　}
　　　　$source_path = "http://".$_SERVER['HTTP_HOST']."/upload/test/".$info[0]['savename'];
　　　　$img_size = getimagesize($source_path);
　　　　$width = $img_size[0];
　　　　$height = $img_size[1];　　
　　　　$mime = $img_size['mime'];
　　　　$srcImg = imagecreatefromstring(file_get_contents($source_path));
　　　　$cropped_img = imagecreatetruecolor($_POST['w'], $_POST['h']);
　　　　//缩放
　　　　// imagecopyresampled($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h'],$width,$height);
　　　　//裁剪
　　　　imagecopy($cropped_img,$srcImg,0,0,$_POST['x'],$_POST['y'],$_POST['w'],$_POST['h']);
　　　　header("Content-Type:image/jpeg");
　　　　imagejpeg($cropped_img,$file_store);
　　　　imagedestroy($srcImg);
　　　　imagedestroy($cropped_img);
　　}

}

, qui copie l'image originale dans une nouvelle image en fonction de la position de recadrage et de la taille de recadrage spécifiées. . L'utilisateur de la page recadre l'image.

imagecopy() Alors qu'en réalité, le frontal n'opère pas sur l'image, mais obtient la position des coordonnées lors du recadrage, la taille du recadrage, puis la soumet à PHP pour opération ! !

Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!