canvas压缩图片转换成base64格式输出文件流

下面是使用canvas压缩图片并转换为base64格式输出文件流的完整攻略:

步骤一:html文件部分

首先,我们需要在html文件中添加一个input元素,用于选择要上传的图片。代码如下:

<label for="image_upload">选择图片:</label>
<input type="file" accept="image/*" id="image_upload">

其中,type属性为file说明该元素是用于上传文件的。accept属性为image/*,表示只能上传图片类型的文件。

步骤二:JavaScript代码部分

接下来,我们需要编写JavaScript代码,使用canvas压缩图片并将其转换为base64格式的输出文件流。

步骤2.1:获取上传文件

首先,我们需要获取用户上传的图片文件。代码如下:

var input = document.getElementById('image_upload');
var file = input.files[0];

步骤2.2:使用canvas压缩图片并转换为base64格式的输出文件流

接下来,我们需要创建一个Image对象,并将待上传的图片文件赋值给该对象的src属性。然后,我们需要监听Image对象的load事件,将图片绘制到canvas上。最后,我们使用canvas的toDataURL方法将图片转换为base64格式的输出文件流。代码如下:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);

  var quality = 0.8; // 压缩比例,可调整
  var base64_data = canvas.toDataURL('image/jpeg', quality);
  console.log(base64_data);
};

上述代码中,canvas的宽度和高度分别设置为Image对象的宽度和高度。然后,我们使用drawImage方法将Image对象绘制到canvas上。toDataURL方法有两个参数。第一个参数是图片的MIME类型,也就是要输出的文件格式。第二个参数是图片的质量,取值范围是0到1。值越大,图片质量越高,但文件大小也越大。

至此,我们就完成了使用canvas压缩图片并转换为base64格式的输出文件流。

步骤2.3:完整代码示例

下面是使用canvas压缩图片并转换为base64格式输出文件流的完整代码示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>canvas压缩图片并转换为base64格式输出文件流</title>
</head>
<body>
  <label for="image_upload">选择图片:</label>
  <input type="file" accept="image/*" id="image_upload">
  <script>
    var input = document.getElementById('image_upload');
    var file = input.files[0];

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = function() {
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0, img.width, img.height);

      var quality = 0.8; // 压缩比例,可调整
      var base64_data = canvas.toDataURL('image/jpeg', quality);
      console.log(base64_data);
    };
  </script>
</body>
</html>

下面再介绍一个压缩多张图片的示例

代码片段如下

var compressImages = function(images, max_width, max_height, compress_ratio, callback) {
  var canvas = document.createElement('canvas')
  var ctx = canvas.getContext('2d')
  var compressed_images = []
  var completed_count = 0

  for (var i = 0; i < images.length; i++) {
    var img = images[i]
    var new_img = new Image()
    new_img.onload = (function(img, new_img, i) {
      return function () {
        canvas.width = Math.min(new_img.width, max_width)
        canvas.height = Math.min(new_img.height, max_height)
        var w = canvas.width, h = canvas.height
        var ratio
        if (new_img.width > max_width || new_img.height > max_height) {
          ratio = Math.min(max_width/new_img.width, max_height/new_img.height)
          w = new_img.width * ratio
          h = new_img.height * ratio
        }         
        ctx.clearRect(0, 0, w, h)
        ctx.drawImage(new_img, 0, 0, w, h)
        var base64_data = canvas.toDataURL('image/jpeg', compress_ratio)
        compressed_images[i] = base64_data
        completed_count++
        if (completed_count == images.length) {
          callback(compressed_images)
        }
      }
    })(img, new_img, i)
    new_img.src = URL.createObjectURL(img)
  }
}

这里我们封装了一个compressImages函数,该函数接受四个参数,分别是上传的图片数组、最大宽度、最大高度、压缩比例以及压缩完成后的回调函数。具体的压缩过程与之前的示例类似,不再赘述。最后,我们将压缩结果放入compressed_images数组中,并在所有图片压缩完成后回调传入的回调函数。

示例代码

var input = document.getElementById('image_upload');
input.addEventListener('change', function() {
  var files = input.files
  var images = []
​
  for (var i = 0; i < files.length; i++) {
    var file = files[i]
    if (file.type.indexOf('image') !== -1) {
      images.push(file)
    }
  }
​
  compressImages(images, 800, 800, 0.8, function(compressed_images) {
    console.log(compressed_images)
  })
})

在示例代码中,我们通过addEventListener监听文件上传事件,获取用户上传的图片文件。我们使用上述封装的compressImages函数压缩图片,并将压缩结果输出到控制台。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:canvas压缩图片转换成base64格式输出文件流 - Python技术站

(0)
上一篇 2023年5月19日
下一篇 2023年5月19日

相关文章

  • JS 加载性能Tree Shaking优化详解

    JS 加载性能Tree Shaking优化详解 什么是Tree Shaking Tree shaking是一个术语,用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于ES2015模块系统中的静态结构特性,例如import和export。这个术语和概念实际上是由 ES2015 模块打包工具rollup启发而来,它是一个目前…

    JavaScript 2023年6月11日
    00
  • 程序开发中的几个请不要相信

    下面我将详细讲解“程序开发中的几个请不要相信”。 什么是“程序开发中的几个请不要相信”? 在程序开发领域,有一些观念被广泛传播和认可,但实际上它们并不一定正确。这些观念可能会导致代码质量下降、项目延期、甚至是项目失败。因此,在程序开发中我们需要警惕这些“请不要相信”的说法。 几个不可信的观念 以下是几个在程序开发中常见但不可信的观念: 1. “这个代码之前能…

    JavaScript 2023年6月11日
    00
  • 深入了解JavaScript中正则表达式的使用

    深入了解JavaScript中正则表达式的使用 正则表达式是一种强大的文本模式匹配的方法,它在JavaScript中有着广泛的应用。本文将介绍正则表达式的基础知识,并包含两条示例说明。 正则表达式的基础知识 创建正则表达式 在JavaScript中,我们可以使用两种方式来创建正则表达式:字面量和RegExp对象。下面是两种方式的示例: // 字面量方式 le…

    JavaScript 2023年6月10日
    00
  • js以分隔符分隔数组中的元素并转换为字符串的方法

    JavaScript中可以使用join()方法将数组中的元素以指定分隔符连接成一个字符串,具体方法如下: 方法一:使用join()方法 语法: 数组对象.join([separator]) 说明: separator(可选):指定分隔符,如果省略,则使用默认的逗号(,)作为分隔符。 示例一: let fruits = ["apple", …

    JavaScript 2023年5月28日
    00
  • JavaScript对IE操作的经典代码(推荐)

    下面是关于“JavaScript对IE操作的经典代码(推荐)”的完整攻略。 1.什么是JavaScript对IE的操作? 在IE浏览器中,有一些功能和方法是IE浏览器所特有的,而这些方法和功能在其他浏览器上可能不支持或者支持的方式不同。JavaScript对IE的操作,就是指通过JavaScript在IE浏览器中调用这些特有的方法和功能,以实现一些特殊的需求…

    JavaScript 2023年5月18日
    00
  • JavaScript框架设计模式详解

    JavaScript 框架设计模式是指在各种 JavaScript 应用和框架中使用的一种处理问题和实现功能的设计方法。下面详细讲解一下这种设计模式的完整攻略。 1. 了解模块化设计 JavaScript 应用程序的模块化设计允许开发人员将整个系统分解成逻辑上相关的不同模块。这使得代码更加整洁和可维护,并允许代码重复使用。 2. 使用设计模式 在 JavaS…

    JavaScript 2023年6月10日
    00
  • 27个JavaScript数组常见方法汇总与实例说明

    「27个JavaScript数组常见方法汇总与实例说明」是一篇介绍JavaScript数组操作方法的文章,主要分为以下三个部分: 一、常见数组方法 这一部分介绍了JavaScript中常用的数组操作方法,包括concat()、push()、pop()、shift()、unshift()、reverse()、sort()、slice()、splice()、in…

    JavaScript 2023年5月18日
    00
  • ajax 技术和原理分析

    AJAX 技术和原理分析 什么是 AJAX AJAX 全称 Asynchronous JavaScript And XML,即异步 JavaScript 和 XML。它是一种用于 Web 开发的技术,允许在客户端和服务器之间进行异步数据请求,从而避免了重新加载整个网页的必要性,使得页面更加快速和动态。通过 AJAX,可以实现无刷新地更新部分数据、响应用户的输…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部