离线合成联想到的--canvas合成水印
前段时间做了功能模块:用户设置自定义勋章;
实现方式:前端把用户设置的昵称传到后台,后台根据不同用户等级,使用离线合成技术合成不同的勋章返回到前端;
方案算是实现了,但是有点坑就是,后台的离线合成没有每次百分之百成功,且生成的图片模糊,现在暂不说这个;
在实现上述功能模块的时候联想到之前有用canvas对图片添加水印的demo,不禁翻出来看一看,也算是回顾一下知识吧。
效果:
大概思路就是,获取一张图片,用canvas绘制一次之后,再在绘制的图片上绘制上水印文字,注意在本地获得的图片要转成64base形式《Base64编码原理与应用》。;
//html
<input type="file" id="uploadFile">
<label for="uploadFile" class="upload-btn">选择图片</label>
<p>图片预览</p>
<img src="" alt="" class="readImg"> //js
var maxFilesize = 1024*1024; //文件最大不能超过100k
var watermark = 'hello world';
var uploadFileEle = document.getElementById('uploadFile');
var readImg = document.querySelector('.readImg');;
var canvesSize = 300; uploadFileEle.addEventListener('change',function(event){
var reader = new FileReader();
var file = event.target.files[0] || event.dataTransfer.files[0]; if(file.size > maxFilesize){
alert('上传的图片不能大于1M');
return;
} //base64编码
if (file) {
reader.readAsDataURL(file);
} reader.addEventListener("load", function () {
//readImg.src = reader.result;
//合成水印
compoundImg(reader.result);
}, false);
},false); //合成水印
function compoundImg(url){
var canvas = document.createElement('canvas');
canvas.width = canvesSize;
canvas.height = canvesSize;
var context = canvas.getContext('2d'); var uploadImg = new Image();
uploadImg.src = url;
uploadImg.onload = function(){
//绘制上传的图片
context.drawImage(uploadImg,0,0,canvesSize,canvesSize,0,0,canvesSize,canvesSize); //绘制文字水印
context.rotate(-15*Math.PI/180);
context.font = "40px Arial";
context.fillStyle = "rgba(17, 17, 17, .6)";
context.textBaseline = 'Middle'; context.fillText(watermark, canvesSize/8, canvesSize/2); var imgUrl = canvas.toDataURL('image/png');
readImg.src = imgUrl;
}
}
如果采用前端添加水印,别人完全可以绕过你的水印逻辑,盗用你的资源。
离线合成联想到的--canvas合成水印的更多相关文章
- [JavaScript] canvas 合成图片和文字
Canvas Canvas 是 HTML5 新增的组件,就像一个画板,用 js 这杆笔,在上面乱涂乱画 创建一个 canvas <canvas id="stockGraph" ...
- H5项目开发分享——用Canvas合成文字
以前曾用Canvas合成.裁剪.图片等<用H5中的Canvas等技术制作海报>.这次用Canvas来画文字. 下图中"老王考到驾照后"这几个字是画在Canvas上的,与 ...
- <canvas合成海报>所遇问题及解决方案总结
最近做了一个用canvas合成海报图片的移动端项目,由于一点canvas基础都没有,所以去网上搜了一位前辈的demo,但是开发过程中遇到了很多问题,现将所遇问题及解决方法总结如下: 1.移动端canv ...
- canvas合成和裁剪
canvas合成和裁剪 属性 globalCompositeOperation=type 设置覆盖类型 source-over 源覆盖在目标上 source-in 源覆盖在目标上的公共部分(只取源图形 ...
- 通过canvas合成图片
通过canvas合成图片 效果图 页面布局部分 两个图片以及一个canvas画布 <img src="https://qnlite.gtimg.com/qqnewslite/20190 ...
- H5 canvas 解决合成图模糊(canvas真机下scale不起作用,无法缩放显示的问题)
在解决canvas合成图片模糊的问题想必我们已经了解了 window.devicePixelRatio window接口的devicePixelRatio返回当前显示设备的物理像素分辨率与C ...
- android-xBuild apk差分与合成,zip差分与合成,lua打包,apk打包,png/jpg图片压缩
android-xBuild 是一项集成了apk差分与合成,zip差分与合成,lua打包.apk打包,png/jpg图片压缩五大功能的开源项目 (github地址:https://github.com ...
- HTML5 canvas 合成属性
合成属性 globalAlpha 设置或返回绘图的当前 alpha 或透明值 globalCompositeOperation ...
- 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
随机推荐
- WPF自定义控件与样式-自定义按钮(Button)
一.前言 程序界面上的按钮多种多样,常用的就这几种:普通按钮.图标按钮.文字按钮.图片文字混合按钮.本文章记录了不同样式类型的按钮实现方法. 二.固定样式的按钮 固定样式的按钮一般在临时使用时或程序的 ...
- CTF中常见密码题解密网站总结
0x00.综合 网站中包含大多编码的解码. http://web2hack.org/xssee/ https://www.sojson.com/ http://web.chacuo.net/ 0x01 ...
- Hadoop API:遍历文件分区目录,并根据目录下的数据进行并行提交spark任务
hadoop api提供了一些遍历文件的api,通过该api可以实现遍历文件目录: import java.io.FileNotFoundException; import java.io.IOExc ...
- DBSCAN
DBSCAN,英文全写为Density-based spatial clustering of applications with noise ,是在 1996 年由Martin Ester, Han ...
- EF5中 执行 sql语句使用Database.ExecuteSqlCommand 返回影响的行数 ; EF5执行sql查询语句 Database.SqlQuery 带返回值
一: 执行sql语句,返回受影响的行数 在mysql里面,如果没有影响,那么返回行数为 -1 ,sqlserver 里面 还没有测试过 using (var ctx = new MyDbConte ...
- 【API调用】腾讯云短信
在之前介绍的火车票查询工具中,利用邮件和短信将查询结果推送给用户.免费短信的条数只有5条,用完之后只能单独使用邮件提醒. 最近发现腾讯云的福利,简单的介绍一下用法. 腾讯云->产品->通信 ...
- 玩一玩基于Token的 自定义身份认证+权限管理
使用基于 Token 的身份验证方法,在服务端不需要存储用户的登录记录.大概的流程是这样的: 客户端使用用户名跟密码请求登录 服务端收到请求,去验证用户名与密码 验证成功后,服务端会签发一个 Toke ...
- [LeetCode] Find K-th Smallest Pair Distance 找第K小的数对儿距离
Given an integer array, return the k-th smallest distance among all the pairs. The distance of a pai ...
- 再谈前端HTML模板技术
在web2.0之前,写jsp的时候虽然有es和JSTL,但是还是坚持jsp.后面在外包公司为了快速交货,还是用了php Smart技术. web2.0后,前端模板技术风行. 代表有如下三大类: Str ...
- java面试之String的理解(自我理解)
1.String是基本数据类型吗? 不是,是对象,引用数据类型 2.String是可变吗? 不可变,String是final类型的. 3.怎样比较两个字符串的值相同,怎样比较两个字符串是否为同一对象? ...