拖动文字加水印
canvas 虽然也能捕获事件, 获取鼠标位置, 并实现拖动文字效果, 但是实现起来太麻烦
所以这里采用更简单的方案
当我们设置水印时, 直接将文字渲染到 canvas 上, 然后在文字上方安放一个颜色透明的内容为水印文字的 span 元素
然后我们在这个 span 元素上加 drag 事件
html5 拖动功能网上一大堆, 这里就不讲了
主要讲一下实现思路:
在开始拖动时, 重新用图片渲染 canvas, 使得之前渲染的文字消失
在结束拖动时, 获取到具体的位置, 再重新将文字渲染进 canvas
这里说起来简单, 其实还是有一些细节, 包括 CSS 和 js 的配合, 比如文字拖动到边界时的处理方式, 又比如文字拖动到边界出现换行的情况
还有一些其他的小坑点, 需要你自己看代码去体会了
这里贴出部分代码:
- // 绑定移动水印相关事件
- var bindEvent4DragWatermark = function() {
- $('#watermark').on('dragstart',
- function(e) {
- var ctx = document.getElementById('target_canvas').getContext('2d');
- ctx.clearRect(0, 0, $('#target_canvas').width(), $('#target_canvas').height());
- ctx.drawImage(img, 0, 0);
- // 显示可拖拽水印
- $(this).addClass('selected');
- watermarkInfo.offsetX = e.originalEvent.offsetX + canvasInfo.left;
- watermarkInfo.offsetY = e.originalEvent.offsetY + canvasInfo.top;
- });
- // 让水印跟着鼠标移动
- $('#watermark').on('drag',
- function(e) {
- var x = e.originalEvent.pageX;
- var y = e.originalEvent.pageY;
- if (x === 0 && y === 0) {
- return;
- }
- x -= watermarkInfo.offsetX;
- y -= watermarkInfo.offsetY;
- $('#watermark').css('left', x).css('top', y);
- });
- $('#watermark').on('dragend',
- function(e) {
- // 调整位置, 使水印无法超出 canvas 边界
- var x = e.originalEvent.pageX - watermarkInfo.offsetX;
- var y = e.originalEvent.pageY - watermarkInfo.offsetY;
- if (x < 0) {
- x = 0;
- }
- if (y < 0) {
- y = 0;
- }
- var maxX = canvasInfo.width - watermarkInfo.width;
- var maxY = canvasInfo.height - watermarkInfo.height;
- if (x > maxX) {
- x = maxX;
- }
- if (y > maxY) {
- y = maxY;
- }
- $('#watermark').css('left', x).css('top', y);
- // 拖拽完水印, 文本隐藏
- $('#watermark').removeClass('selected');
- setTextIntoCanvas();
- });
- // 让鼠标不显示禁用样式
- $('#canvas-container').on('dragover',
- function(e) {
- e.preventDefault();
- });
- }
将最后修改的图片下载下来
之前我们已经讲到了用 canvas 的 toDataURL 函数获取最后的图片数据, 然后关于下载就需要用到一个 HTML5 的 download 属性
<a class="btn" id="download_file" href="#" download="水印图片"> 下载合成图片 </a>
接下来是设置图片数据的代码
- /**
- * 设置 canvas 图像到下载链接上
- */
- function setCanvasImgToDownloadLink() {
- var imgData = document.getElementById('target_canvas').toDataURL();
- $('#download_file').attr('href', imgData);
- };
将功能写进博客里
至于这部分首先要申请 JS 权限
其次如果观察仔细, 还可以在我的代码中看到下列代码
- // 此处通过这种方式将 html 插入, 是因为博客园自动屏蔽了 canvas 标签和 download 属性
- var initHtmlConstruct = function () {
- $('#canvas-container').text('').append('<canvas id="target_canvas" width="100" height="100"> 浏览器不支持此功能, 请升级 </canvas><span draggable="true" id="watermark"></span>')
- $('#toolbar').append('<a class="btn"id="download_file"href="#"download=" 水印图片 "> 下载合成图片 </a>');
- }
至于原因注释里也写了, 是因为博客园的编辑器屏蔽了 canvas 标签和 download 属性
总结
总的来说, 这其实是一个很小的功能, 但是要把它做得好用一点, 涉及到的知识点并不少, 也不并不仅仅我提到的这一点 (比如 canvas 的透明度样式并不是用图片哦, 而是用 css 样式, 还是从 css 揭秘那本书上学到的)
当然这个东西或多或少还是有那么一些瑕疵, 也存在一些兼容性上的问题, 不过对我而言够用就好
也希望上面介绍的一些东西对您也有收获
来源: https://www.cnblogs.com/vvjiang/p/8673879.html