使用canvas在前端实现图片水印合成
toqiye 2024-09-16 05:54 7 浏览 0 评论
图片合成最常见的需求有验证码图片,亦或者图片加水印等,这种实现一般都是后端实现的。
随着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:http://www.zhangxinxu.com/study/201705/js-canvas-image-watermark-synthesis.html
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()重新放到画布上,图像的效果就会发生变化。
由于高级图像合成不是本文的重点,因此这里就点到为止,重在介绍原理和提供思路。
原文作者:张鑫旭
原文链接:https://www.zhangxinxu.com/study/201705/js-canvas-image-watermark-synthesis.html
相关推荐
- 暗网是什么?到底有多可怕?(暗网有多可怕)
-
https://mp.weixin.qq.com/s/O7l4rveLnXLt-XE2A0WZ3g
- “暗网”是什么,到底有多可怕,互联网的“另外一个世界”
-
来源成戈科技说悄悄告诉你何为“暗网”,暗网的用途是什么?到底多可怕?暗网的英文是“deepnet或deepweb”,也就是深网的意思,我们都知道,南北极的冰川看起来非常雄伟,但是你物理稍微懂一点你就...
- 什么是暗网?暗网有什么用?进来我告诉你
-
网的英文是“deepnet或deepweb”,也就是深网的意思,我们都知道,南北极的冰川看起来非常雄伟,但是你物理稍微懂一点你就会知道,我们看到的只是冰山的10%,还有90%在水面以下,很容易看出来,...
- 网工跳槽必备,2022年最新大厂高频技术面试真题整理
-
2022年金三银四正在进行,很多粉丝问我要网络工程师面试方面的资料,有在学校准备实习的,有已经工作准备跳槽的。我翻看最近的笔记,正好有整理一份今年大厂的面试题分享给大家。可以先说的是,国内的互联网面试...
- 三天吃透操作系统面试八股文(三天吃透计算机网络八股文)
-
操作系统的四个特性?并发:同一段时间内多个程序执行(与并行区分,并行指的是同一时刻有多个事件,多处理器系统可以使程序并行执行)...
- 掌握前端面试八股文,提升个人能力,实战面试必备!
-
前言:前端面试是每个前端开发者职业发展中的重要环节。掌握一些常见的前端面试题目,不仅能够在面试中表现出色,还能够提升自身的技术能力和知识广度。本文将为你介绍一些实用的前端面试题目,帮助你在面试中脱颖而...
- 进大厂必备的Java八股文大全(2022最强精简易懂版)
-
2022年秋招即将来临,很多同学会问Java面试八股文有必要背吗?答案是,必须背,博主是个三本,今年凭借这篇八股文斩获了多个大厂暑期实习offer,相信秋招一定也可以发挥重要作用。你可以讨厌这种模式,...
- 2022最新软件测试八股文,能不能拿心仪Offer就看你背得怎样了
-
前言鉴于目前测试就业越来越严峻,内卷也成了测试领域的代名词了。我的一个HR朋友告诉我,由于门槛较低,现在普通测试岗(偏功能)的投递比已经将近100,也就是一个岗位差不多有百分简历投进来。所以现在还想从...
- 《面试八股文》之Dubbo17卷(面试 八股文)
-
作者:moon原文:https://mp.weixin.qq.com/s/-kVf5qWqcw-4AJF7LL3uWw前言...
- 前端面试八股文?不存在的!(2021前端面试问题)
-
最近刷到一位前端小姐姐海外工作分享的视频,分享了她的求职,面试以及工作生活的感受,了解到海外求职面试的一个过程,其中我们经常聊的...
- 凭借这份《2022测试八股文》候选者逆袭面试官,offer拿到手软
-
《2023测试面试八股文》800道软件测试面试真题,高清打印版打包带走,横扫软件测试面试高频问题,涵盖测试理论、Linux、MySQL、Web测试、接口测试、App测试、Python、Selen...
- 面试常考八股文及算法(一)(八股文的要求)
-
define和const的区别1.define是预处理指令,用于创建符号常量。`const`是C和C++的关键字,用于创建具有常量值的变量,本质是只读变量。2.`define`在预处理阶...
- 面试必备(背)--计算机网络八股文系列
-
1.OSI七层、TCP/IP四层的关系和区别?七层模型,亦称OSI(OpenSystemInterconnection),它是一个七层的、抽象的模型体,不仅包括一系列抽象的术语或概念,也包括...
- Java面试一定要坚持背的八股文!错过会很可惜!
-
很多人对java面试题都嗤之以鼻,认为无法衡量出一个程序员的真实水平。还有一部分原因,也是因为太难背了。那我们到底还要不要背?背!当然要背!但也不是死记硬背。在我们背诵的过程中,就把java的核心知识...
- 面试问八股文的公司都是垃圾?(八股文负面影响)
-
做医生的需要有医师资格证,做财务的有CPA证书,做教师的有教师资格证等等,做程序员的从来没听说过面试的时候需要你提供什么证书,既然没有可以证明从业能力的证书,那面试的时候如何来判断候选人的基本能力呢?...
你 发表评论:
欢迎- 一周热门
-
-
如何解决npm安装依赖报错ERESOLVE unable to resolve dependency tree
-
软件推荐丨gocron —— 定时任务管理系统
-
常见面试第三题之Activity的几种启动模式介绍
-
Vite 4.0 正式发布(vite版本)
-
Ruby on Rails 作者的 WYSIWYG 编辑器 Trix 火了!
-
岁月静好2015/08月批发榜 批发韩版女装
-
Cordova打包Android应用流程(MAC)
-
有赞技术团队vue开源UI框架vant快速入门
-
0019-Yarn的JobHistory目录权限问题导致MapReduce作业异常
-
一个 Python 小项目的小结(python小型项目)
-
- 最近发表
- 标签列表
-
- systemproperties (65)
- canvas图片 (57)
- npm版本管理 (61)
- localhost:15672 (59)
- materialtheme (86)
- node-ssh (68)
- 全局路由守卫 (57)
- 图床搭建 (62)
- vue3addeventlistener (60)
- mybatisselectone (78)
- css圆形进度条 (69)
- androidble蓝牙开发 (62)
- android-gif-drawable (60)
- appender-ref (64)
- springbootmockito (68)
- css边框渐变色和圆角 (58)
- gsonfastjson (59)
- 依赖注入的方式 (62)
- cookie跨域共享 (63)
- easyexcel导出图片 (77)
- dp数组 (61)
- js获取兄弟节点 (68)
- sysctl-a (60)
- java知音 (58)
- window.target (62)