JavaScript-Code zur Implementierung der Bildkomprimierung

Der Inhalt dieses Artikels befasst sich mit dem JavaScript-Code für die Bildkomprimierung. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

Kommen wir ohne weitere Umschweife direkt zum Code. Was zurückgegeben wird, ist ein Base64-String

/**
 * 图片压缩，默认同比例压缩
 * @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('canvas');
  var ctx = canvas.getContext('2d');
  // 创建属性节点
  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);
 }
}

Aufrufmethode

// 调用函数处理图片 　　　　　　　　　　　　　　　　
dealImage("路径", {
// 注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径（因为用take photo后的图片路径，我没有试成功（如果有人试成功了可以分享一下经验））
 width : 200
}, function(base){
//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
 document.getElementById("transform").src = base;
 console.log("压缩后：" + base.length / 1024 + " " + base);　　　　
})

PS: Das Wichtigste Die Idee besteht darin, nach Erhalt des Bildes die Bilddaten mithilfe der H5-Canvas-Technologie in eine Base64-Zeichenfolge umzuwandeln und sie schließlich an den Hintergrund zu übertragen. Der Hintergrund speichert die Base64-Zeichenfolgendaten als Bild.

Verwandte Empfehlungen:

Javascript-Code-Sharing zur Realisierung einer provinziellen und kommunalen Verknüpfung

Javascript-Code-Einführung zur Realisierung eines Binärbaums

Das obige ist der detaillierte Inhalt vonJavaScript-Code zur Implementierung der Bildkomprimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!