canvas 实现图片添加水印

1.使用canvas来实现图片添加水印（也包括上传图片后显示水印~）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const img = new Image();img.src = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641713990&t=72f8af1f008cc345262d05086b4b2afe';img.crossOrigin = "anonymous";img.onload = function () {const canvas = document.createElement("canvas");let _ix = img.width;let _iy = img.height;canvas.width = _ix;canvas.height = _iy;const ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);ctx.textAlign = "left";ctx.textBaseline = "top";ctx.font = "18px Microsoft Yahei";ctx.fillStyle = "rgba(255, 255, 255, .5)";ctx.translate(0, 0);ctx.rotate((Math.PI / 180) * 15);//旋转//水印密度for (let i = 0; i < _iy / 120; i++) {  for (let j = 0; j < _ix / 50; j++) {ctx.fillText('11111', i * 120, j * 50, _ix);}}const base64Url = canvas.toDataURL()console.log(base64Url);console.log(base64toBlob(base64Url));console.log(translateBase64ImgToBlob(base64Url,"image/jpeg"));}/*Base64 转成 Blob*/function base64toBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], { type: mime });}/*Bolb 转 URL 原理： 利用URL.createObjectURL为blob对象创建临时的URL*/function translateBase64ImgToBlob(base64,contentType){var arr = base64.split(',')  //去掉base64格式图片的头部var bstr = atob(arr[1])   //atob()方法将数据解码var leng = bstr.lengthvar u8arr = new Uint8Array(leng)while(leng--){u8arr[leng] =  bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码}var blob = new Blob([u8arr],{type:contentType})var blobImg = {}blobImg.url = URL.createObjectURL(blob)  //创建URLblobImg.name = new Date().getTime() + '.png'return blobImg  }</script>
</body>
</html>

canvas 实现图片添加水印相关推荐

神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下: http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没 ...
小程序使用 canvas 给图片添加水印
小程序使用 canvas 给图片添加水印操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑-) 浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效 ...
JS前端基于canvas给图片添加水印，并下载带有水印的图片
基于canvas给图片添加水印实现效果图图片添加水印的步骤 1.获取图片路径,将图片转换为canvas 2.canvas画布上绘制文字水印 3.水印绘制完成后,将canvas转换为图片格式 4.水 ...
前端实现可绘制的canvas画布_JS前端基于canvas给图片添加水印
前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前端实现 ...
利用canvas给图片添加水印
前言前两天给个人网站添加了一个小功能,就是在文章编辑上传图片的时候自动给图片加上水印.给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一.本文简单记录一下借助canvas在前 ...
使用canvas给图片添加水印
上接文章"图片处理" canvas元素其实就是一个画布,我们可以很方便地绘制一些文字.线条.图形等,它也可以将一个img标签里渲染的图片画在画布上. 我们在上传文件到后端的时候,使 ...
通过canvas给图片添加水印
在页面添加一个上传文件的input标签添加capture="camera"直接打开相机 <input id="file" type="file ...
使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,...
一,前端合成带水印的图片一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
html2canvas给图片添加水印,小程序用Canvas给图片加水印，拼接图片，制作名片
Canvas是微信小程序中的一个原生组件,因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明.canvas这个组件其实就是一个画布,你可以在上面画很多你用其他方式不好实现的内容.下面我就将 ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...

canvas 实现图片添加水印

canvas 实现图片添加水印相关推荐

最新文章

热门文章