Généralement, lors du traitement du téléchargement d'image, la logique habituelle consiste à télécharger l'image source vers le côté serveur, puis le langage côté serveur effectue le fonctionnement de la mise à l'échelle.
Ce mode peut généralement répondre à la plupart des besoins, mais lorsque l'image dont nous avons besoin n'est qu'une miniature de l'image source d'une taille spécifiée, l'utilisation de ce mode sera un moyen de gaspiller les ressources du serveur et la bande passante. Par conséquent, nous envisageons de générer de petites images sur le navigateur, puis de les télécharger.
// Ce qui suit est le code source
La copie de code est la suivante:
fonction drawCanvasimage (obj, largeur, rappel) {
var $ canvas = $ ('<canvas> </ canvas>'),
Canvas = $ canvas [0],
context = canvas.getContext ('2d');
var img = new image ();
img.onload = function () {
if (largeur) {
if (largeur> img.width) {
var cible_w = img.width;
var target_h = img.height;
}autre{
var target_w = largeur;
var target_h = parseInt (target_w / img.width * img.height);
}
}autre{
var cible_w = img.width;
var target_h = img.height;
}
$ canvas [0] .Width = Target_w;
$ canvas [0] .Height = Target_h;
context.DrawImage (IMG, 0,0, Target_W, Target_H);
_Canvas = canvas.todataurl ();
/*Console.log(_Canvas) ;*/
rappel (obj, _canvas);
}
img.src = getfullPath (obj);
}
fonction getfullpath (obj)
{
si (obj)
{
// c'est-à-dire
if (window.navigator.useragent.indexof ("msie")> = 1)
{
obj.select ();
return document.selection.createrange (). texte;
}
// Firefox
else if (window.navigator.useragent.indexof ("firefox")> = 1 || $ .browser.opera || $ .browser.mozilla)
{
if (obj.files && window.url.createObjectUrl)
{
return window.url.createObjectUrl (obj.files [0]);
}
retour obj.value;
} else if ($. Browser.safari) {
if (window.webkiturl.createObjectUrl && obj.files) {
return window.webkiturl.createObjectUrl (obj.files [0]);
}
retour obj.value;
}
retour obj.value;
}
}
La fonction getfullpath est d'obtenir l'adresse de l'image sélectionnée.
_Canvas obtient le codage d'image codé en base64 et transférez-le simplement sur le backend pour écrire dans le fichier.