Code JavaScript pour implémenter la compression d'image

Le contenu de cet article concerne le code JavaScript pour la compression d'images. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Sans plus tarder, passons directement au code. Ce qui est renvoyé est une chaîne base64

/**
 * 图片压缩，默认同比例压缩
 * @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);
 }
}

Méthode d'appel

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

PS : L'idée principale est d'obtenir l'image, d'utiliser la technologie H5 Canvas pour convertir les données de l'image en une chaîne base64, et enfin de les transmettre en arrière-plan pour le stockage de l'image.

Recommandations connexes :

Partage de code Javascript pour réaliser des liens provinciaux et municipaux

Introduction au code Javascript pour réaliser un arbre binaire

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!