canvas压缩图片以及卡片制作的方法示例


Posted in HTML / CSS onDecember 04, 2018

在做一些活动页的时候,经常会有一些需要上传图片的需求,并且还需要将图片以及生成的文字以及贴图生成一张卡可以供用户可以长按保存。这个需求之前完成过一次,最近又遇上了,使用的都是canvas来实现的。干脆整理出一篇博客出来。如果有更好的实现方法,欢迎提出一起探讨。

使用canvas压缩图片

在html中使用写入input标签,type为file时候,可以调出手机的相册可供选择照片,也可以支持摄像头进行拍照功能。在这个场景下,就可能出现图片的体积会更大,可能会超出后端所支持的最大范围,从而导致上传失败。

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

1.首先要先获取到图片文件

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    console.log(file)
    // 选择的文件是图片
    if (file.type.indexOf("image") == 0) {
      reader.readAsDataURL(file);    
    }
  });

2.这个时候就取到了图片文件,就不得不了解一下js中FileReader对象的使用了

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容

方法:

方法名 参数 描述
abort none 中断读取
readAsBinaryString file 二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本
  • readAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
  • readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
  • readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以 data: 开头的字符串,这段字符串的实质就是 Data URL,Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。(其中base64的方式就是由此来获得的。。)

FileReader处理事件简介

事件 描述
onabort 中断时触发
onerror onabort
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

继续上面的操作,在拿到图片之后,需要将文件进行处理转化,此时

var reader = new FileReader(); 
//将文件以Data URL形式读入页面 
  reader.readAsDataURL(file); 
  reader.onload=function(e) { 
    console.log(reader)
  }

现在取到了图片也进行了转化,现在可以进行压缩了。

var eleFile = document.querySelector('#file');
  var reader = new FileReader()
  eleFile.addEventListener('change', function (event) {
    file = event.target.files[0];
    // console.log(file)
    // 选择的文件是图片
    if (file.type.indexOf("image") == 0) {
      var reader = new FileReader(); 
      //将文件以Data URL形式读入页面 
        reader.readAsDataURL(file); 
        reader.onload=function(e) { 
          // console.log(this.result)
          var pre=document.getElementById("pre"); 
          pre.setAttribute("src", this.result)
          canvasDataURL(this.result, 100, 0.5)
        }     
    }
  })
  /* [canvasDataURL    通过canvas进行压缩]
   * @params path  图片的base64的格式
   * @params targetWidth  压缩后图片的宽度  
   * @params quality 图片质量  quality值越小,所绘制出的图像越模糊
   */
  function canvasDataURL(path, targetWidth, quality) {
    var img = new Image();
    img.src = path
    img.onload = function () {
        // var that = this
        // console.log(that)
        // 默认按比例压缩
        var w = this.width
        var h = this.height
        scale = w / h;
        w = targetWidth
        h = targetWidth / scale
        var quality = quality;  // 默认图片质量为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(this, 0, 0, w, h);
        // quality值越小,所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        var result=document.getElementById("result"); 
        result.setAttribute("src", base64)
    }
  }

很简单,这样就可以得到压缩后的图片了,从以上的代码可得知,原理在于canvas中的toDataURL方法可指定图片压缩后的格式及压缩质量,把canvas信息压缩并转为base64编码来实现压缩。

使用canvas制作卡片

场景:把刚刚压缩之后的图片与另一张图片相结合,可长按进行保存。

function drawCanvas (target) {
    var canvas = document.querySelector('#myCanvas')
    var ctx = canvas.getContext('2d')
    // 是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例
    var dp = window.devicePixelRatio || 1
    var backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
    var ratio = this.dp / this.backingStoreRatio
    var oldWidth = canvas.width
    var oldHeight = canvas.height
    canvas.width = oldWidth * ratio
    canvas.height = oldHeight * ratio
    canvas.style.width = oldWidth + 'px'
    canvas.style.height = oldHeight + 'px'
    ctx.scale(ratio, ratio)
    var headerImg = new Image()
    var bgImg = new Image()
    headerImg.src = target
    bgImg.src = '../bg.png'
    headerImg.onload = (e) => {
      // 图片的宽高比
      var rate = headerImg.width / headerImg.height
      console.log(rate)
      bgImg.onload = (e) => {
        ctx.drawImage(headerImg, 10, 30, 50, (50 / rate))
        // 背景图片
        ctx.drawImage(bgImg, 0, 0, 150, 150)
        ctx.fillText('厉害啊', 80, 70)
        var resultImg = new Image()
        resultImg.src = canvas.toDataURL('image/png', 1)
        resultImg.style.width = '100%'
        var cardImg=document.getElementById("cardImg"); 
        cardImg.setAttribute("src", resultImg.src)
      }
    }

取到刚刚得到的图片,在图像装载完毕时后将其画到画布上,也可以配上文字等等,最后也是把canvas的信息转为base64编码来进行实现 。可以通过代码来进行实例的实践

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
HTML高亮关键字的实现代码
Oct 22 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
浅谈CSS不规则边框的生成方案
May 25 HTML / CSS
小程序实现悬浮按钮的全过程记录
Oct 16 HTML / CSS
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
Nov 11 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
Nov 01 #HTML / CSS
You might like
PHP详解ASCII码对照表与字符转换
2011/12/05 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
基于vue实现微博三方登录流程解析
2020/11/04 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
python如何删除文件中重复的字段
2019/07/16 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
优衣库美国官网:UNIQLO美国
2018/04/14 全球购物
城市轨道专业个人求职信范文
2013/09/23 职场文书
应届毕业生求职信
2013/11/30 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
公司岗位说明书
2015/10/08 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript
日元符号 ¥
2022/02/17 杂记
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python