Implémentation simple du recadrage des images et de leur stockage à l'aide de Javascript

Cet article présente principalement l'implémentation simple de l'utilisation de Javascript pour recadrer les images et les stocker. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Recadrer les images pour nous. C'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. Par conséquent, cet article présente principalement la méthode simple d'utilisation de Javascript. recadrer les images et les stocker. Pour la mise en œuvre, 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 attente d’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 :

Premier : N'oubliez pas d'introduire les plug-ins 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 qu'il y a 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, version 3.1.3

Collez le code :

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);
　　}

}

Voici une série de méthodes pour créer des images dans la bibliothèque GD. La chose la plus importante est

, qui copie l'image originale sur une nouvelle image en fonction de la position de recadrage et de la taille de recadrage spécifiées. . Cela illustre également une chose. Lorsque l'utilisateur de la page recadre l'image

imagecopy() , le frontal n'opère pas réellement sur l'image, mais obtient la position des coordonnées lors du recadrage, la taille du recadrage, puis la soumet. vers PHP pour le fonctionnement ! !

Recommandations associées :

Comment utiliser JavaScript pour générer aléatoirement un certain nombre de mots de passe

Comment utiliser le % de JavaScript faire de l'entrelacement Changement de couleur

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!