Heim > Artikel > Web-Frontend > So implementieren Sie die Funktion zum Hochladen und Komprimieren von Bildern in js (ausführliches Tutorial)

So implementieren Sie die Funktion zum Hochladen und Komprimieren von Bildern in js (ausführliches Tutorial)

亚连Original: 2018-06-12 16:36:032688Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Codes von js zum Hochladen und Komprimieren von Bildern vor. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel teilen js mit allen Der spezifische Code zum Implementieren des Hochladens und der Bildkomprimierung ist wie folgt:

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>

Das Obige ist das, was ich für alle zusammengestellt habe alle in der Zukunft.

Verwandte Artikel:

So erstellen Sie eine Element-UI (ausführliches Tutorial)

So verwenden Sie eine Vorlage in der Vue2-Vorlage

So erstellen Sie Komponenten in Vue

So verwenden Sie Eslint in Vue-cli, um die automatische Formatierung zu implementieren

In ES6 ruft die untergeordnete Komponente die Verwendungsmethode der übergeordneten Komponente auf

So erstellen Sie eine dynamische Form in Winkelform

Verwenden Sie $http zur Implementierung Asynchroner Upload in der Excel-Dateimethode „AngularJS“

So implementieren Sie das datengesteuerte Ansichtsprinzip durch Vuejs

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Funktion zum Hochladen und Komprimieren von Bildern in js (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So berechnen Sie die Differenz zwischen zwei Zeiten mit JSNächster Artikel：So berechnen Sie die Differenz zwischen zwei Zeiten mit JS

In Verbindung stehende Artikel

Mehr sehen