Comment implémenter la fonction de téléchargement et de compression d'images en js (tutoriel détaillé)-js tutoriel-php.cn

Comment implémenter la fonction de téléchargement et de compression d'images en js (tutoriel détaillé)

亚连

Libérer： 2018-06-12 16:36:03

original

2687 Les gens l'ont consulté

Cet article présente principalement les codes pertinents de js pour télécharger et compresser des images en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article partagent js avec tout le monde. Le code spécifique pour implémenter le téléchargement et la compression d'image est pour votre référence. Le contenu spécifique est le suivant

Code :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 </head>
 <body>
  <input type="file" id="picFile" onchange="readFile(this)"/> 
  <img style="" id="img" src="" alt="" />
  <script>
  function readFile(obj){ 
   var file = obj.files[0];  
   //判断类型是不是图片 
    if(!/image\/\w+/.test(file.type)){ 
      alert("请确保文件为图像类型"); 
      return false; 
    } 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e){
     dealImage(this.result,{width:200},function(base){
     　　　　document.getElementById(&#39;img&#39;).setAttribute(&#39;src&#39;,base)
     });
    } 
  } 
 
  /**
   * 图片压缩，默认同比例压缩
   * @param {Object} path
   * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
   * @param {Object} obj
   * obj 对象 有 width， height， quality(0-1)
   * @param {Object} callback
   * 回调函数有一个参数，base64的字符串数据
   */
  function dealImage(path, obj, callback){
   var img = new Image();
   img.src = path;
   img.onload = function(){
   var that = this;
   // 默认按比例压缩
   var w = that.width,
   h = that.height,
   scale = w / h;
   w = obj.width || w;
   h = obj.height || (w / scale);
   var quality = 0.7; // 默认图片质量为0.7
   //生成canvas
   var canvas = document.createElement(&#39;canvas&#39;);
   var ctx = canvas.getContext(&#39;2d&#39;);
   // 创建属性节点
   var anw = document.createAttribute("width");
   anw.nodeValue = w;
   var anh = document.createAttribute("height");
   anh.nodeValue = h;
   canvas.setAttributeNode(anw);
   canvas.setAttributeNode(anh);
   ctx.drawImage(that, 0, 0, w, h);
   // 图像质量
   if(obj.quality && obj.quality <= 1 && obj.quality > 0){
   quality = obj.quality;
   }
   // quality值越小，所绘制出的图像越模糊
   var base64 = canvas.toDataURL(&#39;image/jpeg&#39;, quality );
   // 回调函数返回base64的值
   callback(base64);
   }
  }
  </script>
 </body>
</html>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. utile à tout le monde à l’avenir.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment implémenter la fonction de téléchargement et de compression d'images en js (tutoriel détaillé)