js压缩base64图片大小

可以使用canvas将base64图片压缩，具体步骤如下：

1. 将base64图片转换成Image对象

var img = new Image();
img.src = base64Str;

2. 等待Image对象加载完毕后，使用canvas进行压缩

img.onload = function() {
  // 创建canvas元素
  var canvas = document.createElement('canvas');
  // 设置canvas宽高
  canvas.width = img.width;
  canvas.height = img.height;
  // 获取2d上下文
  var ctx = canvas.getContext('2d');
  // 将图片绘制到canvas上
  ctx.drawImage(img, 0, 0);
  // 获取压缩后的base64图片数据
  var compressedBase64Str = canvas.toDataURL('image/jpeg', 0.5); // 第二个参数表示图片质量，可自行调整
};

3. 最后得到的compressedBase64Str就是压缩后的base64图片数据，可以使用该数据进行上传或其他操作。

相关问题

js实现压缩base64图片压缩并上传

以下是一个示例代码，使用canvas将图片压缩为指定大小，然后将压缩后的base64字符串上传到服务器。

HTML代码：

<input type="file" id="file-input">

JavaScript代码：

// 获取文件输入框元素
const fileInput = document.getElementById('file-input');

// 监听文件输入框变化事件
fileInput.addEventListener('change', () => {
  // 获取文件对象
  const file = fileInput.files[0];

  // 创建 FileReader 对象
  const reader = new FileReader();

  // 读取文件完成事件
  reader.addEventListener('load', () => {
    // 创建图像对象
    const img = new Image();

    // 图像加载完成事件
    img.addEventListener('load', () => {
      // 创建 canvas 对象
      const canvas = document.createElement('canvas');

      // 缩放比例
      const scale = Math.min(800 / img.width, 800 / img.height);

      // 设置 canvas 大小
      canvas.width = img.width * scale;
      canvas.height = img.height * scale;

      // 绘制图像到 canvas 中
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 将 canvas 转为 base64 字符串
      const base64 = canvas.toDataURL('image/jpeg', 0.8);

      // 发送 base64 字符串到服务器
      uploadBase64(base64);
    });

    // 加载图像
    img.src = reader.result;
  });

  // 读取文件
  reader.readAsDataURL(file);
});

// 上传 base64 字符串到服务器
function uploadBase64(base64) {
  // 发送 AJAX 请求
  // ...
}

这里使用 canvas 将图片压缩为指定大小，然后将压缩后的 base64 字符串上传到服务器。在实际开发中，还需要根据具体需求进行调整，比如调整压缩比例、设置图片格式、设置上传方式等等。

vue base64图片压缩

在Vue项目中，对base64编码的图片进行压缩通常是为了优化性能和减少资源的大小，从而加快页面的加载速度。可以通过JavaScript提供的API来实现这一功能，但需要注意的是，base64编码的字符串表示的是图片的原始数据，如果要压缩这种字符串形式的图片数据，实际上是需要先将其转换为图片对象，然后利用canvas进行压缩，最后再转换回base64字符串。

以下是使用JavaScript和canvas对base64图片进行压缩的基本步骤：

1. 将base64字符串转换为Blob对象。
2. 使用FileReader API读取Blob对象，得到二进制数据。
3. 创建一个Image对象，将二进制数据作为源。
4. 将图片绘制到canvas上，并在绘制过程中指定压缩后的尺寸。
5. 最后，使用canvas的toDataURL方法将canvas内容转换回base64字符串，此时得到的就是压缩后的图片数据。

示例代码如下：

function compressBase64Image(base64, quality = 0.7) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = function() {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            // 设置目标尺寸
            canvas.width = img.width * quality;
            canvas.height = img.height * quality;
            // 绘制图片到canvas并压缩
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            // 将canvas转换为base64
            const compressedBase64 = canvas.toDataURL('image/jpeg', quality);
            resolve(compressedBase64);
        };
        img.onerror = function() {
            reject('图片加载失败');
        };
        img.src = base64;
    });
}

使用这个函数，你可以传入一个base64编码的图片字符串，并获取一个压缩后的图片字符串。