【纯前端】原生js实现照片水印

=====================时间分割线========================

2020/09/21 前排更新了一下代码，多了“添加指定水印图片作为水印”(只显示一个在左上角)，以及添加了适当的“自定义水印文字”

(可以修改旋转角度、颜色、字体大小)、两种情况下在左下角添加时间(自定义水印字因为加了旋转，添加时间时得反转)

新项目地址https://jsrun.net/bK6Kp

预览

========================时间分割线=====================

场景/契机：

react项目使用了react-photo-view来实现图片查看，但是该组件无法在图片本身添加水印，又要求纯前端解决。为了纯前端得到一个含有水印的url故有此操作。

演示地址:http://jsrun.net/9t2Kp

HTML代码：

<img id="showimg">

JS代码:

let previous_url = "http://i2.tiimg.com/704774/ce778c4938b3c7e2.jpg";
const reader = new FileReader();
const showimg = document.getElementById('showimg');//img元素
const canvas = document.createElement('canvas');
let source = new Image();
source.src = previous_url;
source.onload=()=>{
canvas.width = source.width;
canvas.height = source.height;const ctx = canvas.getContext("2d")let getImageBlob = (url, cb) => {var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.responseType = "blob";xhr.onload  = function() {if (this.status == 200) {if(cb) cb(this.response);}};xhr.send();
}getImageBlob( previous_url , function(blob){// previous_url = URL.createObjectURL(blob);reader.readAsDataURL(blob);});reader.onload = (e) => {// console.log(previous_url)const img = document.createElement('img');img.src = e.target.result;img.onload=()=>{ctx.drawImage(img,0,0)ctx.font = "20px 宋体";ctx.textBaseline = 'middle';ctx.fillStyle="snow"ctx.beginPath()ctx.rotate(-20*Math.PI/180);for(let x = -3; x*300<=source.width+900;x++){for(let y = -3; y*200<source.height+600;y++){ctx.fillText('e商城注册专用其他无效', 170+(300*x), 30+(200*y));}}canvas.toBlob(blob=>{previous_url = URL.createObjectURL(blob);showimg.src  = previous_url;console.log(previous_url)});}};}

思路：
[1]用new image获得图片原始尺寸并记录，用记录中的原始尺寸生成等大的画布。

【注:】所有后续操作均执行在image对象的onload时期。

[2]用XHR来获得图片的base64保存在reader对象的e.target.result中。

【注:】这个base64用在后面创建的img的dom对象赋值src的位置，规避“Tainted canvases may not be exported”的问题。

[3]创建一个img的dom对象接收上面的base64，在这个img的dom的onload阶段使用ctx.drawImage将其绘制于之前与原图等大画布的上下文中。
[4]绘制水印并通过toBlob得到新图片的url
rotate实际是旋转的整个画布，与其算出每次倾斜后的坐标，不如绘制文字时就已经绘制在可视范围外即一个更大的假想画布上，旋转这个假想画布就会使水印也能充满可视画布的边缘了。

[5]用canvas.toBlob将最终的画布输出成blob，通过URL.createObjectURL生成可以被img的src直接使用的url

【纯前端】原生js实现照片水印相关推荐

js 点击闭包_【新年跳槽必备】2020最新（前端原生JS专题）面试题速领！
最近我把每周更新的面试题发在我们的学习群里大家似乎都很高冷哇难道是默默的做题去了没说话每期面试题都是Richard老师认真准备的真的希望能帮到大家哦本期是前端原生JS专题 A前端原生JS专 ...
手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
纯前端，js导出页面为pdf
首先引入js <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js& ...
前端原生js请求后台接口
封装请求 function httpRequest(obj, successfun, errFun) {var xmlHttp = null;//创建 XMLHttpRequest 对象,老版本的 I ...
使用前端原生 js，贪吃蛇小游戏
好久好久,真的是好久好久没来写过了,因为最近有点小忙.不过即使是忙,也也还是写了两个小游戏,其中一个就是这个,贪吃蛇啦. 算是一个小练手了,这个是在有点太简单了,只是第一次写这种小游戏,还是零零星星花 ...
纯原生JS实现导出Excel文件
前言: 各种js库用起来冗余,并且只想简单的导出excel文件选择table标签是为了后期能定制化内容 0.效果预览 excel文件: 浏览器控制台触发下载: 1.定义工具函数: // xlsxE ...
纯前端JS实现一个登记照改换底色背景色功能
说到登记照改换底色功能的实现,我想大部分人都会认为使用opencv或者机器学习方法对图像进行图像分割.边缘检测.基于语义的物体检测.无监督的像素分类算法等等算法是最好的途径. 而我最近实现了一个登记照 ...
原生js + 后端nodejs实现邮箱信封表白程序
一个简单的信封表白程序由前端原生js + 后端nodejs(接收邮件) 程序体验地址:http://love.hzzy.xyz/ (手机访问效果更加) 前端介绍如果点击了跳动的爱心,会开始放烟花来 ...

【纯前端】原生js实现照片水印

【纯前端】原生js实现照片水印相关推荐

最新文章

热门文章