react加水印_多功能React影像组件(拖拽、水印、缩放、切换、旋转)

cxj-react-image 用法如下：

yarn add cxj-react-image

// npm i cxj-react-image

import ImageModal from 'cxj-react-image';

src={imageList[currentImageIndex]} {/* 当前图片路径 */}

next={() => this.next()} {/* 控制下一张 */}

prev={() => this.prev()} {/* 控制上一张 */}

closeModal={() => this.closeImg()} {/* 控制modal打开关闭 */}

option={{

move: true, {/* 控制拖动 */}

waterMarkText: '多功能图片组件', {/* 设置水印文字 */}

rotate: true, {/* 控制旋转 */}

zoom: true {/* 控制放大缩小 */}

}}

/>

更详细的用法请参考 container.js文件

如有帮助，感谢star~ 如有问题，欢迎call me~

交流请加wx: c13266836563

以下为相关实现讲解

拖拽

实现拖拽的思路是计算出dom最后的left跟top。

未移动前可以通过clientX跟offsetLeft拿到dom的x坐标和左边距，记为initX和offLeft。

移动的过程中可以通过clientX拿到元素的x坐标，记为moveX。

得到公式：left = moveX - initX + offLeft。

核心代码如下：

const move = (dv) => {

// 获取元素

let x = 0;

let y = 0;

let l = 0;

let t = 0;

let isDown = false;

// 鼠标按下事件

dv.onmousedown = function(e) {

// 获取x坐标和y坐标

x = e.clientX;

y = e.clientY;

// 获取左部和顶部的偏移量

l = dv.offsetLeft;

t = dv.offsetTop;

handleMove();

};

// 鼠标移动

// 再包一层是为了方便注册 避免被替换

function handleMove() {

onmousemove = function(e) {

// 获取x和y

let nx = e.clientX;

let ny = e.clientY;

// 计算移动后的左偏移量和顶部的偏移量

let nl = nx - (x - l);

let nt = ny - (y - t);

dv.style.left = nl + 'px';

dv.style.top = nt + 'px';

};

}

};

关于拖拽，有个情况还需要优化：页面上有两个modal，要保证最后点击的modal要覆盖之前点击的modal。

也就是zIndex要控制好，这里用localStorage来保存这个最大的zIndex

imageModalMaxzIndex = localStorage.getItem('imageModalMaxzIndex');

if (dv.style.zIndex != imageModalMaxzIndex) {

dv.style.zIndex = +imageModalMaxzIndex + 1;

localStorage.setItem('imageModalMaxzIndex', dv.style.zIndex);

}

水印

前端实现水印，避免私密图片泄露

思路是使用canvas生成文字图片，然后利用以下的css：

background-image:url('${base64Url}');

background-repeat:repeat;

实现水印类：

/**

* @overview: 水印组件

*/

export default class WaterMark {

constructor(container, option) {

this.container = container;

this.option = {

width: '200px',

height: '150px',

opacity: .7,

fillStyle: 'rgba(47, 205, 227, 0.3)',

font: '20px microsoft yahei',

textBaseline: 'middle',

textAlign: 'center',

fillText: '水印',

...option

};

}

draw() {

const {

container,

option: {

width,

height,

opacity,

fillStyle,

font,

textBaseline,

textAlign,

fillText,

scrollHeight

}

} = this;

const canvas = document.createElement('canvas');

canvas.setAttribute('width', width);

canvas.setAttribute('height', height);

canvas.setAttribute('opacity', opacity);

const ctx = canvas.getContext('2d');

ctx.textAlign = textAlign;

ctx.textBaseline = textBaseline;

ctx.font = font;

ctx.fillStyle = fillStyle;

ctx.rotate(Math.PI / 180 * 30);

ctx.fillText(fillText, 80, 10);

var base64Url = canvas.toDataURL();

const watermarkDiv = document.createElement('div');

watermarkDiv.setAttribute('style', `

position:absolute;

top:0;

left:0;

width:100%;

height:${scrollHeight || '100%'};

z-index:1000;

pointer-events:none;

background-repeat:repeat;

background-image:url('${base64Url}')`);

if (typeof container === 'object') {

container.style.position = 'relative';

container.insertBefore(watermarkDiv, container.firstChild);

}

}

}

这里有一篇文章总结了几种前端水印的方案，推荐给大家 文章

缩放

缩放的话，监听鼠标滚动事件。向上滚动放大，向下滚动缩小；这里要注意控制最小缩放值。

还要注意的是图片在边界的缩放，不然图片可能会移动在屏幕外。

需要做的处理是判断左边界跟图片的宽度。

代码实现：

// 控制滚轮缩放

const zoom = (onWheelEvent, dom) => {

let e = onWheelEvent;

let imageModalWidth = parseInt(dom.style.width);

let modalLeft = parseInt(dom.style.left);

// 计算缩放后的大小 每一次滚轮 100px

let calcWidth = imageModalWidth - e.deltaY;

// 限制最小 width = 400

if (calcWidth <= 300) {

return;

}

// 不让modal由于缩小消失在视野中

if (modalLeft + calcWidth < 50) {

return;

}

dom.style.width = `${calcWidth}px`;

};