当前位置:首页 > 编程教程 > javascript技术文章 > JavaScript图片处理与合成总结

JavaScript图片处理与合成详解

  • 发布时间:
  • 作者:码农之家
  • 点击:130

这篇文章主要知识点是关于JavaScript、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript函数式编程
  • 类型:JavaScript大小:42158 MB M格式:PDF作者:MichaelFogus佛格斯,欧阳继超
立即下载

Tags:JavaScript 

JavaScript图片处理与合成总结

引言

图片处理现在已经成为了我们生活中的刚需,想必大家也经常有这方面的需求。实际前端业务中,也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求,让我在这方面积累了一些干货,趁着年后这段时间总结成一系列文章与大家分享,希望能对各位努力中的前端童鞋带来启发和帮助

本系列分成以下4个部分:

  1. 基础类型图片处理技术之缩放与裁剪;
  2. 基础类型图片处理技术之图片合成;
  3. 基础类型图片处理技术之文字合成;
  4. 算法类型图片处理技术;

文章中,我会提到很多在实际实践中所遇到的坑或者经验,应该算是干货满满~~如果能通读,应该能大大提升对前端图片处理领域的理解,有感兴趣的童鞋可以与我深入讨论,希望本文能达到抛砖引玉的效果,让前端在图像处理方面有更多的可能性,有不足之处望请谅解。

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

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

唠叨完这些老套路后,我们开始起飞!

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

基础类型的图片处理技术: 图片缩放,旋转,添加边框,图片合成,拼图等业务都属于基础类型的图片处理,其区分点在于无需使用像素级别的算法,而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能:

JavaScript图片处理与合成总结

算法类型的图片处理: 这类型的图片处理复杂度较高,特点是通过像素级别算法对图片的像素点进行RGBA通道值等进行改造,例如我们使用photshop或者美图秀秀等工具对图片进行的 美颜 / 滤镜 / 黑白 / 抠图 / 模糊等操作,这类型的重点主要在于算法和性能层面。例如常用的妆容功能:

JavaScript图片处理与合成总结

本系列首先从基础类型处理开启我们的旅程。基础类型的图片处理在实际项目中有着大量的使用场景,主要是运用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 : 需要绘制的图片源,需要接收已经 加载完成 的HTMLImageElementHTMLCanvasElement或者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 插件,可以解决从 Filebase64 的所有问题。

二、图片的裁剪

在实际项目中,由于图片的宽高比例各式各样,而展示和使用一般需要一个较为固定的比例,此时便需要将图片裁剪成我们需要的宽高比例,使用到的方式其实和图片的缩放基本一致,主要是通过调整 drawImagedx, 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);
}

三、图片的旋转

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

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: 由于我们将画板基点移动到画布中心了,因此在绘制的时候,要相对于基点调整 dxdy;
// 创建画布,获取画板;
...

// 放大系数为
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);

// 导出图片;
...

总结

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

图片处理技术分类;

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

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

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

相信大家已经对图片的处理有了个大致的了解了。下篇文章,我们将继续深入研究基础类型中的图片合成,也是各种干货满满,美不胜收。

最后,非常感谢各位童鞋的阅读,有何建议或者疑惑,可以随时与我讨论哈

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.715670

Javascript数组Array方法解读

接上一篇《Javascript数组Array基础介绍》,这一篇详细介绍Array的所有方法。 所有数组的方法都定义在Array.prototype上,而Array.prototype本身也是一个数组。 array.concat() 浅复制一份当前数组,并把接收到的参数附加到新数组的末尾。原数组不改变。 语法 array.concat(value1, value2, ..., valueN) 参数为需要合并的数组或非数组值 var arr1 = [1, 2, 3];var obj = {animal : 'monkey'};var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);// arr1 [1, 2, 3]// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]obj.animal = 'tiger';// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9] 可以合并数组或非数组值,但是要注意如果包含对象,对象还是引用原来的对象。 array.join() 返回一个将数组所有元素用分隔符拼接成的字符串,默认分隔符为逗号。 语法 array.join(seperator) 参数为分割符 var arr1 = [1, 2, 3];var str = arr1.join(); // 1,2,3str = arr1.join('#'); ……

网友NO.494667

浅析JavaScript异步代码优化

前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用、定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的Javascript异步代码成为了异步编程至关重要的前提。下面我们从问题出发,一步步完善你的异步代码。 异步问题 1. 回调地狱 首先,我们来看下异步编程中最常见的一种问题,便是回调地狱。它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的,比如: // 一个动画结束后,执行下一个动画,下一个动画结束后再执行下一个动画$('#box').animate({width: '100px'}, 1000, function(){ $('#box').animate({height: '100px'}, 1000, function(){ $('#box').animate({left: 100}, 1000); });}); 由于我们不知道第一个动画什么时候开始或者什么时候结束,所以我们把第二个动画的执行内容放到了……

网友NO.529721

JavaScript变量提升和严格模式实例分析

本文实例讲述了JavaScript变量提升和严格模式。分享给大家供大家参考,具体如下: 1.什么是变量提升 所谓的变量提升指的是:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体(作用域)的最顶部。 下面我们通过一个例子来详细说明一下。 //变量声明在使用之前var x;console.log(x);//undefined//变量声明在使用之后console.log(y);//undefinedvar y;//上面的式子可以写成下面的样子/*变量提升:把x,y提升到顶部var x;var y;console.log(x);console.log(y);*/ 从上面这个例子我们可以看到: ①变量的使用有两种形式,先声明再使用或者先使用后声明; ②无论是哪一种形式都不影响变量的使用,这是因为有变量提升的存在,每一个你定义的变量都会被提升到顶部,也就是函数最开始的部分,这就变成了你在使用变量时其实都已经声明变量了。 下面我举一个经典的例子来更好地……

网友NO.492042

JavaScript html5利用FileReader实现上传功能

本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下 1. Html部分 h2文件上传演练/h2 div id="result" !-- 这里用来显示读取结果 -- div id="inResult" div id="inImgs"/div div id="imgInfo"/div /div /div input type="text" id="txtImgSrc" /!--显示图片信息-- input type="button" id="btnRemove" / button id="btnBrowse" onClick="onFile()"Browse.../button input type="file" id="file_input" / 2. JS部分 script type="text/javascript" var result = document.getElementById("result"); var input = document.getElementById("file_input"); var inResult = document.getElementById('inResult'); if(typeof FileReader === 'undefined'){ result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; input.setAttribute('disabled','disabled'); }else{ input.addEventListener('change',readFile,false); } function onFile(){ document.getElementById('file_input').click(); //打开input type="file" id="file_input" / } function readFile(){ var……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757