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实现根据详细地址获取经纬度功能示例

    实现根据详细地址获取经纬度功能的过程中,可以按照以下步骤进行操作: 第一步:引入百度地图API 在文档的头部中引入百度地图API的js文件。例如,在html文件中可以通过以下代码引入库文件: <script src="http://api.map.baidu.com/api?v=2.0&ak=your-appkey">…

    JavaScript 2023年5月28日
    00
  • 15个值得收藏的JavaScript函数

    15个值得收藏的JavaScript函数 介绍 在网页应用程序中,JavaScript是常用的编程语言之一。它有许多有用的函数,可以提高程序的效率和交互性。在这篇文章中,我们将介绍“15个值得收藏的JavaScript函数”,这些函数涵盖了从日期和时间到字符串和数学的各个方面。希望这篇文章能够帮助您提高JavaScript编程能力。 日期和时间 1. get…

    JavaScript 2023年5月18日
    00
  • js获取网页高度(详细整理)

    让我来详细讲解一下”js获取网页高度(详细整理)”的攻略。 什么是网页高度? 网页高度指的是整个网站页面的高度,包括html、body、以及网页中的所有内容和元素。在一些网站应用中,需要获取网页高度,以便于调整页面布局等操作。下面来介绍一些常用的获取网页高度的方法。 方法一:使用document.body.scrollHeight 使用javascript中…

    JavaScript 2023年6月11日
    00
  • 详解JavaScript的this指向和绑定

    详解JavaScript的this指向和绑定 什么是this 在JavaScript中,this关键字是一个对象,它根据函数的调用方式不同而发生变化。在定义函数的时候我们通常称之为上下文,然后在执行函数的时候确定它的上下文。 this指向 this指向在JavaScript中是非常灵活的。一般情况下它指向的是调用函数的对象,但是在一些情况下它的行为会非常变态…

    JavaScript 2023年6月11日
    00
  • jquery带动画效果幻灯片特效代码

    下面是jquery带动画效果幻灯片特效代码的完整攻略: 步骤一:引入jQuery库文件 在网站页面的head部分中引入jQuery库文件。可以使用jQuery官网提供的cdn链接或将jQuery库文件下载到本地并引入。 例如,使用cdn链接的方式: <head> <script src="https://cdn.bootcdn.n…

    JavaScript 2023年6月11日
    00
  • js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前

    下面是“js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前”的完整攻略: 步骤一:获取时间戳 在开始计算与当前时间相差多久之前,我们需要获取时间戳。时间戳是指自 1970 年 1 月 1 日 00:00:00 UTC 起至现在的总秒数。 我们可以通过 JavaScript 的 Date 对象获取当前的日期时间,然后将其转换为时间戳。示例代码如下: …

    JavaScript 2023年5月27日
    00
  • two.js之实现动画效果示例

    Two.js 介绍 Two.js 是一个用于在网页上创建 2D 动画的轻量级绘图库。它基于 SVG 封装了 Canvas API,可在 Canvas 和 SVG 之间进行切换。Two.js 的通用性非常强,可以应用于多种类型的网页开发。它可以被应用于创意、动态交互和数据可视化等多种场景。本篇攻略将介绍如何实现使用 Two.js 开发动画效果的示例。 安装 T…

    JavaScript 2023年6月10日
    00
  • javascript实现类似超链接的效果

    下面是Javascript实现类似超链接的效果的攻略。 步骤 步骤一:设置HTML结构 首先需要在HTML文件中创建一个标签作为超链接的容器。这个容器可以是div、span、a等标签。 <div id="link">这是一个超链接</div> 步骤二:使用Javascript绑定点击事件 然后使用Javascrip…

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