JavaScript如何实现图片处理与合成


Posted in Javascript onMay 29, 2020

引言:

图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到

图片加工和处理。

首先,我这里将前端图片处理暂且分成两种类型:基础类型 与 算法类型;

  • 基础类型的图片处理技术: 图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:
  • 算法类型的图片处理: 这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行改造,例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作,这类型的重点主要在于算法和性能层面。例如常用的妆容功能:

通过这些积累,我封装了几个项目中常用的功能:

  • 图片合成: Example Git
  • 图片裁剪: Example Git
  • 人像抠除: Example Git

本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用canvas的能力来完成,不存在性能和兼容性问题,能够达到线上运行标准。我这里将基础类型的图片处理大致的分成以下几种类型,这些类型基本能覆盖日常所有业务场景:

  • 图片的缩放;
  • 图片的裁剪;
  • 图片的合成;
    • 图片与图片的合成,例如贴纸,边框,水印等;
    • 为图片添加文字;
    • 为图片添加基础几何图形;

Tips: 我已将该类型的图片处理场景封装成了一个插件,基本上能应付所有这类型图片处理的需求,GIT地址 (欢迎探讨);
在介绍具体的功能前,由于图片的绘制完全的依赖于图片的加载,因此先来了解一些前置知识。

1、图片的跨域

首先,图片加载并绘制涉及了图片的跨域问题,因此如果是一张在线的图片,需要在图片服务器上设置跨域头,并且在前端加载图片之前将<img>标签的crossOrigin设置为*,否则绘制到画布的时候会报跨域的错误。

Tips: 这里积累了一些小坑,可以跟大家分享下:

1、crossOrigin需要严格设置,既只有是线上图片时,才设置,而本地路径或者base64时,则一定不能设置,否则在某些系统下会报错,导致图片加载失败;

2、当项目为本地包环境时,例如内置于 App中时,crossOrigin值无效,webview的安全机制会导致无论该值设置与否,都会报跨域的错误。解决办法是:需要将所有图片转换成base64才能正确绘制;

3、crossOrigin值一定要在图片加载之前设置,即为<img>赋值src之前进行设置,否则无效;

2、图片的加载

由于canvas的绘制需要的是已经加载完成的图片,我们需要确保绘制的素材图片是已经加载完成的,因此我们需要使用<img>的onload事件,可以使用html中已存在的图片,或者用js创建一个图片对象:

function loadImage(image, loader, error){
  // 创建 image 对象加载图片;
  let img = new Image();
  
  // 当为线上图片时,需要设置 crossOrigin 属性;
  if(image.indexOf('http') == 0)img.crossOrigin = '*';
  img.onload = () => {
    loaded(img);
    
    // 使用完后清空该对象,释放内存;
    setTimeout(()=>{
      img = null;
    },1000);
  };
  img.onerror = () => {
    error('img load error');
  };
  img.src = image;
}

介绍图片加载的前置知识后,我们先来看最简单的图片处理---缩放与裁剪!

Tips: 相信大家阅读本文时,如果对canvas不太了解,可以查询下对应的API文档即可,本文不再对canvas基础API做详细讲解。

一、图片的缩放

图片的缩放最常见的场景是做图片的压缩。在保证图片清晰的前提下通过合理地缩小图片尺寸,能大大的降低图片的大小。在实际应用场景中,有着广泛的用途。例如图片上传时,用户自主上传的图片可能是一张非常大的尺寸,例如现在手机所拍摄的照片尺寸经常能达到1920*2560的尺寸,大小可能超过5M。而在项目中,我们可能并不需要用到这么大的尺寸,此时对图片的压缩能大大的优化加载速度和节省带宽;

1、新建一个canvas画布,将宽高设置为需要压缩到的尺寸;

该画布既为图片缩放后的尺寸,此处有个点是需要保证图片的比例不变, 因此需要通过计算得出画布的宽与高:

let imgRatio = img.naturalWidth / img.naturalHeight;

// 创建一个画布容器;
let cvs = document.createElement('canvas');

// 获取容器中的画板;
let ctx = cvs.getContext('2d');
cvs.width = 1000;
cvs.height = cvs.width / imgRatio;

2、将图片画入后再导出成base64;

这里使用2个最常用的方法:

  • ctx.drawImage(image, dx, dy, dw, dh): 这个方法其实最多可以接收9个参数, 实现压缩,只需要使用其中的5个参数即可, 其余参数在其它部分使用到时再做详解;
    • image : 需要绘制的图片源,需要接收已经 加载完成 的HTMLImageElement,HTMLCanvasElement或者HTMLVideoElement;
    • dx / dy : 相对于画布左上角的绘制起始点坐标;
    • dw / dh : 绘制的宽度和高度,宽高比例并不锁定,可使图片变形;
  • cvs.toDataURL(type, quality): 该方法用于将画布上的内容导出成 base64 格式的图片,可配置2个参数;
    • type: 图片格式, 一般可以使用 image/png 或者 image/jpeg, 当图片不包含透明时,建议使用jpeg,可使导出的图片大小减小很多;
    • quality: 图片质量,可使用0~1之间的任意值;经过测试,该值设置成0.9时较为合适,可以有效减小图片文件大小且基本不影响图片清晰度,导出后的 base64 既为压缩后的图片;

Tips: 此处有个坑, 想导出jpg格式的图片必须用image/jpeg,不能使用image/jpg;

// 将原图等比例绘制到缩放后的画布上;
ctx.drawImage(image, 0, 0, cvs.width, cvs.height);

// 将绘制后的图导出成 base64 的格式;
let b64 = cvs.toDataURL('image/jpeg', 0.9);

3.多种格式的图片转换成base64;

我们常用的图片上传功能,我们使用的是原生的<input type="file">标签,此时获取到的是File格式的图片,图片的格式各异且尺寸很大,我们应该压缩处理后再使用。

使用FileReader:

let file = e.files[0];  
if(window.FileReader) {    
  let fr = new FileReader();   
  fr.onloadend = e => {
    let b64 = e.target.result;
    
    // b64即为base64格式的用户上传图;
  };    
  fr.readAsDataURL(file);
}

对base64的图片使用刚才的canvas方式进行压缩的处理;

Tips: 这里有个小坑是,图片的EXIF信息中的方向值会影响图片的展示,在IOS会出现图片的宽高与图片的方向不匹配的问题,因此需要进行特殊处理,矫正图片的方向。方案:

1、可以使用 exif.js 来获取图片信息中的Orientation属性,利用canvas的旋转绘制来矫正;

2、这里有个 canvasResize.js 插件,可以解决从 File 到 base64 的所有问题。

二、图片的裁剪

在实际项目中,由于图片的宽高比例各式各样,而展示和使用一般需要一个较为固定的比例,此时便需要将图片裁剪成我们需要的宽高比例,使用到的方式其实和图片的缩放基本一致,主要是通过调整 drawImage 的dx, dy参数来实现。原理其实是,将drawImage的绘制起始点(dx, dy)向上偏移,此时由于canvas已被我们设置成期望裁剪后的尺寸,而超出画布的部分不会绘制,从而达到裁剪的目的;通过灵活的设置值,基本可以完成各种图片裁剪需求,简单示例图(黑色框代表创建的画布的尺寸):

JavaScript如何实现图片处理与合成

此处以需要将一张600*800的长方形图竖直居中裁剪为600*600的正方形图为例, 简单封装成一个功能函数:

// 使用方式:
let b64 = cropImage(img, {
  width : 600,
  height : 600,
});

// 居中裁剪
function cropImage(img, ops){
  // 图片原始尺寸;
  let imgOriginWidth = img.naturalWidth,
    imgOriginHeight = img.naturalHeight;
    
  // 图片长宽比,保证图片不变形;
  let imgRatio = imgOriginWidth / imgOriginHeight;
  
  // 图片裁剪后的宽高, 默认值为原图宽高;
  let imgCropedWidth = ops.width || imgOriginWidth,
    imgCropedHeight = ops.height || imgOriginHeight;
    
  // 计算得出起始坐标点的偏移量, 由于是居中裁剪,因此等于 前后差值 / 2;
  let dx = (imgCropedWidth - imgOriginWidth) / 2,
    dy = (imgCropedHeight - imgOriginHeight) / 2;

  // 创建画布,并将画布设置为裁剪后的宽高;
  let cvs = document.createElement('canvas');
  let ctx = cvs.getContext('2d');
  cvs.width = imgCropedWidth;
  cvs.height = imgCropedHeight;
  
  // 绘制并导出图片;
  ctx.drawImage(img, dx, dy, imgCropedWidth, imgCropedWidth / imgRatio);
  return cvs.toDataURL('image/jpeg', 0.9);
}

三、图片的旋转

图片的旋转的原理同样也是将图片绘制到画布上进行旋转后再导出。其实使用到的是canvas的rotate方法;

let cvs = document.createElement('canvas');
let ctx = cvs.getContext('2d');

// 将参照点移动到画板的中心点;
ctx.translate(ctx.width/2, ctx.height/2);
// 旋转画板;
ctx.rotate = 90;
// 绘制图片;
ctx.drawImage(img);
// 导出得到旋转后的图片;
cvs.toDataURL();

这里有个比较特别的部分,就是这里旋转的是画布的画板部分,并不是整个画布容器,而画布容器外面不会被绘制,因此这里就会出现一个图像四个角被裁剪掉的问题:

JavaScript如何实现图片处理与合成

解决的方式就是:

将画布容器放大,变成:

JavaScript如何实现图片处理与合成

上面这个例子中,由于图片是正方形,因此将容器的宽高放大1.5倍便可保证图片不会被裁剪,而现实中的图片由于宽高比例不定,因此这个放大系数是一个动态的值:

Tips: 由于我们将画板基点移动到画布中心了,因此在绘制的时候,要相对于基点调整 dx 与 dy;

// 创建画布,获取画板;
...

// 放大系数为
let iw = img.width, ih = img.height;
let ir = iw > ih ? iw / ih : ih / iw;

cvs.width = iw * ir * 1.5;
cvs.height = ih * ir * 1.5;
// 将参照点移动到画板的中心点;
ctx.translate(cvs.width/2, cvs.height/2);
// 旋转画板;
ctx.rotate = 90;

// 绘制图片;
ctx.drawImage(img, -cvs.width/2, -cvs.height/2);

// 导出图片;
...

总结

本文主要介绍了一些前端图片处理的前置知识:

图片处理技术分类;

  • 基础类型图片处理技术;
  • 算法类型图片处理技术;
  • 图片的跨域;
  • 图片的加载;

还有讲解了属于基础类型图片处理中最简单的两类:

  • 图片的缩放;
  • 图片的裁剪;
  • 图片的旋转;

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

Javascript 相关文章推荐
javascript通过class来获取元素实现代码
Feb 20 Javascript
实现点击列表弹出列表索引的两种方式
Mar 08 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
原生js实现简单的链式操作
Jul 04 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
JavaScript基于用户照片姓名生成海报
May 29 #Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 #Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 #Javascript
JavaScript隐式类型转换代码实例
May 29 #Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 #Javascript
node+vue实现文件上传功能
May 28 #Javascript
You might like
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
PHP基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
Whatever:hover 无需javascript让IE支持丰富伪类
2010/06/29 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Python多线程编程(一):threading模块综述
2015/04/05 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
实例介绍Python中整型
2019/02/11 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python实现代码统计程序
2019/09/19 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
教师自我评价范文
2013/12/16 职场文书
学生安全责任书模板
2014/07/25 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
红色电影观后感
2015/06/18 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android