使用canvas在前端实现图片合成
看着总结的不错,我也就拿来主义了,做个记录,侵权必删
图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。
随着HTML5发展和现代浏览器的占比越来越高,我们其实也可以在前端直接进行图片的合成。优点在于,响应更快,体验更好;如果是和文字进行合成,我们可以利用客户端字体,视觉展现效果更丰富;同时展示和合成全部都是前端完成,因此更利于维护。
这里通过举个例子,演示如何在前端实现多个图片合成的效果,主要是借助HTML5 canvas
相关技术。
一、使用canvas在前端实现图片水印合成
如果仅仅是普通的合成,例如一个底图和一个PNG水印图片合成,直接使用canvas
的drawImage()
方法即可,语法如下:
context.drawImage(img,x,y); context.drawImage(img,x,y,width,height); context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
各个参数示意为:
参数 | 描述 |
---|---|
img | 用来被绘制的图像、画布或视频。 |
sx | 可选。img被绘制区域的起始左上x坐标。 |
sy | 可选。img被绘制区域的起始左上y坐标。 |
swidth | 可选。img被绘制区域的宽度(如果没有后面的width或height参数,则可以伸展或缩小图像)。 |
sheight | 可选。img被绘制区域的高度(如果没有后面的width或height参数,则可以伸展或缩小图像)。 |
x | 画布上放置img的起始x坐标。 |
y | 画布上放置img的起始y坐标。 |
width | 可选。画布上放置img提供的宽度(可能会有图片剪裁效果)。 |
height | 可选。画布上放置img提供的高度(可能会有图片剪裁效果)。 |
而PNG水印图片的合成,直接连续在使用drawImage()
把对应的图片绘制到canvas
画布上就可以,原理就是这么简单。
我们直接案例吧,您可以狠狠地点击这里:JS canvas水印图片合成demo
demo页面的功能如下:
- 选择自己电脑中的图片;
- 合成;
例如,我们点击“选择图片”按钮,如下截图:
选择一张小于50K的图片,例如这张:
结果变成这样子,白色的YUX字样是后来合成上去的:
不要疑惑为什么不使用这张图片?
因为图片有大片浅色区域,水印看不清楚。
此时,我们直接右键就可以保存这张合成的图片了:
此demo有3
处需要特别说明的技术点,一是本地选择图片转化成base64
地址,相关代码如下:
inputFile.addEventListener('change', function (event) {var reader = new FileReader();var file = event.target.files[0];reader.onload = function(e) {var base64 = e.target.result;};reader.readAsDataURL(file); });
主要是借助HTML5 FileReader
读取文件的base64信息;
二是把这个图片的base64地址绘制到canvas画布上,核心JS代码如下:
var canvas = document.createElement('canvas'); var context = canvas.getContext('2d');// 这是上传图像 var imgUpload = new Image(); imgUpload.onload = function () {// 绘制context.drawImage(imgUpload, 0, 0, 180, 180); }; imgUpload.src = base64;
三是在已经绘制好了本地图片的画布上继续画水印图片,并借助canvas的toDataURL()
方法把我们的canvas
画布转换成base64
无损PNG地址。假设水印图片DOM对象名称是eleImgCover
,则:
// 绘制 context.drawImage(imgUpload, 0, 0, 180, 180); // 再次绘制水印 context.drawImage(eleImgCover, 0, 0, 180, 180); // 此时canvas.toDataURL('image/png')的结果就是最终合成的base64图片信息var finalResult = canvas.toDataURL('image/png');
更完整的代码参见demo演示页面。
二、使用canvas实现更为复杂的图片合成
具有透明背景的水印图片合成是canvas
图片合成中最基本最简单的,如果遇到更为复杂的合成,例如各取50%
透明度进行合成,或者经典的mix-blend-mode混合模式的,此时可能就需要借助算法来实现了。
原理为,使用HTML5 canvas
getImageData()
方法获取图片完整的像素点信息,通过已知我自己设计的混合算法,对多个图片的像素信息进行合成,合并,重计算,最后把新的图片像素信息通过putImageData()
方法重新绘制到画布上,从而实现更为复杂的图片合成效果。
其中,getImageData()
方法返回ImageData
对象,该对象拷贝了画布指定矩形的像素数据。
ImageData
中有个data
属性,这个属性是个巨大的数组,而这个数组每四个值为一组,分别对应图片中的每个像素的RGBA值,值范围如下:
R – 红色 (0-255)
G – 绿色 (0-255)
B – 蓝色 (0-255)
A – alpha 通道 (0-255; 0 是透明的,255 是完全可见的)
只要对这些数字进行重新处理,再putImageData()
重新放到画布上,图像的效果就会发生变化。
由于高级图像合成不是本文的重点,因此这里就点到为止,重在介绍原理和提供思路。
本人转载自博客 zhangxinxu
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6165
使用canvas在前端实现图片合成相关推荐
- h5 canvas html 合成,图片合成以及canvas的应用
使用 canvas 在前端实现图片合成 基本API // 绘制图片常用 API const canvas = document.createElement('canvas'); const ctx = ...
- 小猿圈web前端简述canvas如何实现二维码和图片合成
你经常看到活动海报什么的,上都是有各种宣传文案以及二维码形成的,你知道怎么用canvas实现二维码和图片合成,下面小猿圈Linux讲师为你详细介绍一下canvas如何实现二维码和图片合成的. 使用ur ...
- 前端生成二维码与图片合成
首先前端生成二维码 使用插件完成,插件为DrawQRCode.unitypackage 合成二维码直接使用DrawQRCode 类里提供的方法即可 生成二维码的方法 DrawCode_Color32 ...
- canvas图片合成海报
canvas图片合成海报 //创建一共hb.js代码如下 var sthb = {//参数说明:info是一个对象里面主要传入的是绘制图片的宽高和图片的src还有我们生成的二维码图片的宽高位置init ...
- Android 图片合成:添加蒙板效果 不规则相框 透明度渐变效果的实现
Android 图片合成:添加蒙板效果 不规则相框 透明度渐变效果的实现 暂时还未有时间开发这效果,所以先贴出来. 先贴一张效果图,这是一张手机截屏: 左上方的风景图:背景图片 右上方的人物图:前景图 ...
- 仿选单网图片合成小工具
仿选单网小工具图片合成 仿选单网小工具图片合成,自此过程中主要遇到两个问题,一是怎样让一个div在一个包含他的div盒子中进行拖动,最开始想到的是利用鼠标按下事件mousedown来改变盒子内元素的定 ...
- 前端的图片优化的6种方案
前端的图片优化的6种方案 1.使用base64编码代替图片 场景:适用于图片大小小于2KB,页面上引用图片总数不多的情况 原理:将图片转换为base64编码字符串inline到页面或css中 优势:减 ...
- 微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
- 前端JS图片压缩处理
2020-10 分享 近期工作遇到了用户上传图片由前端压缩图片大小,再传到OSS.这样可以减少用户上行传输的数据量,减少用上传的等待时长,优化用户体验. 方案:利用js现成canvas. Canvas ...
最新文章
- jQuery Validate 表单验证插件----自定义校验结果样式
- python在线读-python初级实战-----主机在线情况监控web
- SQLite安装、编译与应用
- 教程:一起学习Hystrix--服务(依赖)失败场景的表象
- tf.nn.embedding_lookup函数的用法
- SQL语言之DQL语言学习(八)多表查询/链接查询 SQL92学习
- python批量执行linux命令并写入log日志
- 20145122《Java面向对象程序设计》实验二实验报告
- 1个通用工具平台+多个热点场景工具套件,助力开发者快速构建应用
- 商城小程序源码|开源小程序商城完整源码附视频搭建教程
- 计算机c盘加容量,增加C盘空间,详细教您怎么增加C盘空间
- 【笔记】为什么现代人变得越来越娱乐至死
- 婴儿脸上起湿疹吃什么好
- Springer出版社旗下投稿word模板
- SAP ECC 6.0 下载以及安装
- Oracle查看表空间和数据表的使用情况
- 【Android】关于statusbar的处理
- JAVA面试-基础加强与巩固:反射、注解、泛型等
- 王怀南+邵亦波+王建硕=?
- VS2008工具栏看不到配置管理器或者解决方案配置
热门文章
- 全新交通大动脉!华为智慧铁路解决方案助力中老铁路正式开通;马瑞利任命樊坚强先生为中国区总裁 | 美通社头条...
- 浙里办对接H5微应用遇到的问题
- FASS-K8S云原生全闪存储解决方案
- 虚拟化系统镜像下载地址及Linux更新国内源
- MSSQL数据库一对多和多对一查询的转换
- POI导出Excel设置单元格背景色
- scal sdk plugin 地址 scala-intellij-bin**.zip
- TMB简介(肿瘤突变负荷 tumor mutation burden, 简称TMB)
- House Robber的解法
- linux运行python程序