Óöµ½ÎÊÌâ
ÈÕ³£¹¤×÷ÖУ¬¾³£»áÓöµ½ºÜ¶àÃô¸ÐµÄÊý¾Ý£¬Îª·ÀÖ¹Êý¾ÝµÄй¶£¬ÎÒÃÇÒªÔÚÊý¾ÝÉÏ×öһЩ¡±°ü×°¡°¡£Ä¿µÄ¾ÍÊÇÈÃÄÇЩÓÐÐÄй¶Êý¾ÝµÄ¡±²»·¨·Ö×Ó¡°ÆÈÓÚÑÏÖصġ±ÓßÂÛѹÁ¦¡°¶ø·ÅÆú²»·¨ÐÐΪ£¬Ê¹Ö®¡±·¸×ïδËì¡°£¬´ïµ½²»Õ½¶øÇüÈËÖ®±øµÄЧ¹û¡£¶øÔÚ°²È«²¿ÃŹ¤×÷µÄÎÒÃÇ£¬Êý¾Ý°²È«µÄ¹ÛÄîÔçÒÑÉîÈë¹ÇË裬ÿ¸öÎÄ×Ö£¬Ã¿ÕÅͼƬ£¬¶¼ÒªÁôÐÄÊÇ·ñÓÐй¶µÄ·çÏÕ£¬Ôõô·ÀÖ¹Êý¾Ýй¶£¬ÊÇÎÒÃÇһֱ˼¿¼µÄÎÊÌâ¡£±ÈÈçͼƬµÄˮӡ£¬¾ÍÊÇÎÒÃǹ¤×÷¹ý³ÌÖо³£Éæ¼°µ½µÄÎÊÌâ¡£ÒòΪ±¾Éí¹¤×÷ÄÚÈݾÍÊÇÉóºËƽ̨µÄ¿ª·¢£¬¾³£ÓÐһЩ·çÏÕͼƬ»áÔÚÉóºËƽ̨³öÏÖ£¬¿¼Âǵ½ÉóºËÈËÔ±µÄ°²È«Òâʶ²Î²î²»Æ룬ËùÒÔΪ·ÀÖ¹²»°²È«µÄÊÂÇé·¢Éú£¬Í¼Æ¬Ôö¼ÓˮӡµÄ¹¤×÷ÊDZØÐëÒª×öµÄ¡£
Ê×ÏÈ£¬¿¼Âǵ½ÒµÎñ³¡¾°£¬Ïֽ׶εÄÎÊÌâÖ»ÊÇÔÚÉóºË¹ý³ÌÖе£ÐÄÊý¾ÝµÄй¶£¬ÎÒÃÇÔÝʱֻ¿¼ÂÇÏÔʽˮӡ£¬¼ÈÔÚͼƬÉÏÔö¼ÓһЩ¿ÉÒÔÇø±ðÄã¸öÈËÉí·ÝµÄÎÄ×Ö»òÕßÆäËûÊý¾Ý¡£ÕâÑù¾Í¿ÉÒÔ×öµ½¸ù¾Ý鶵ÄÊý¾Ý¿ÉÒÔ×·²éµ½¸öÈË£¬µ±È»£¬Î´Óê³ñçÑ£¬·À»¼ÓÚδȻµÄ¾¯Ê¾¹¦ÄܲÅÊÇËü×îÖ÷Òª¡£
ˮӡµÄʵÏÖ·½Ê½Óкܶ࣬¸ù¾ÝʵÏÖ¹¦ÄܵÄÈËÔ±·Ö¹¤¿ÉÒÔ·ÖΪǰ¶ËˮӡºÍºó¶Ëˮӡ£¬Ç°¶ËˮӡµÄÓŵã¿ÉÒÔ×ܽáΪÈýµã£¬µÚÒ»£¬¿ÉÒÔ²»Õ¼Ó÷þÎñÆ÷×ÊÔ´£¬ÍêÈ«ÒÀÀµ¿Í»§¶ËµÄ¼ÆËãÄÜÁ¦£¬¼õÉÙ·þÎñ¶ËѹÁ¦¡£µÚ¶þ£¬Ëٶȿ죬ÎÞÂÛÄÄÖÖÇ°¶ËµÄʵÏÖ·½Ê½£¬ÐÔÄܶ¼ÊÇÓÅÓÚºó¶ËµÄ¡£µÚÈý£¬ÊµÏÖ·½Ê½¼òµ¥¡£ºó¶ËʵÏÖˮӡµÄ×î´óÓÅÊÆÒ²¿ÉÒÔ×ܽáΪÈýµã£¬¾ÍÊÇ°²È«£¬°²È«£¬°²È«¡£Öªºõ£¬Î¢²©¶¼ÊDzÉÓúó¶ËʵÏÖµÄˮӡ·½°¸¡£µ«ÊÇ×ۺϿ¼ÂÇ£¬ÎÒÃÇ»¹ÊDzÉÓÃÇ°¶ËʵÏÖˮӡµÄ·½°¸¡£ÏÂÃæÒ²»á¼òµ¥½éÉÜÏ nodejs ÔõôʵÏÖºó¶ËͼƬˮӡ¡£
ÌṩÈý¸ö npm °ü£¬±¾²¿·Ö²»ÊÇÎÒÃÇÎÄÕµÄÖص㣬ֻÌṩ¼òµ¥µÄ demo¡£1£¬gm https://github.com/aheckmann/gm 6.4k star
const fs = require('fs');
const gm = require('gm');
gm('/path/to/my/img.jpg')
.drawText(30, 20, "GMagick!")
.write("/path/to/drawing.png", function (err) {
if (!err) console.log('done');
});
ÐèÒª°²×° GraphicsMagick »òÕß ImageMagick£»2£¬node-images£ºhttps://github.com/zhangyuanwei/node-images
var images = require("images");
images("input.jpg") //Load image from file
//¼ÓÔØͼÏñÎļþ
.size(400) //Geometric scaling the image to 400 pixels width
//µÈ±ÈËõ·ÅͼÏñµ½400ÏñËØ¿í
.draw(images("logo.png"), 10, 10) //Drawn logo at coordinates (10,10)
//ÔÚ(10,10)´¦»æÖÆLogo
.save("output.jpg", { //Save the image to a file, with the quality of 50
quality : 50 //±£´æͼƬµ½Îļþ,ͼƬÖÊÁ¿Îª50
});
²»ÐèÒª°²×°ÆäËû¹¤¾ß£¬ÇáÁ¿¼¶£¬zhangyuanwei ¹úÈË¿ª·¢£¬ÖÐÎÄÎĵµ£»3£¬jimp£ºhttps://github.com/oliver-moran/jimp¿É´îÅä gifwrap ʵÏÖ gif ˮӡ£»
1£¬±³¾°Í¼ÊµÏÖÈ«ÆÁˮӡ
¿ÉÒÔµ½°¢ÀïÄÚÍâ¸öÈËÐÅÏ¢Ò³Ãæ²é¿´Ð§¹û£¬ÔÀí£º
Óŵ㣺ͼƬÊǺó¶ËÉú³É£¬°²È«£»È±µã£ºÐèÒª·¢Æð http ÇëÇ󣬻ñȡͼƬÐÅÏ¢£»Ð§¹ûչʾ£ºÓÉÓÚÊÇÄÚ²¿ÏµÍ³£¬²»·½±ãչʾЧ¹û¡£
2£¬dom ʵÏÖȫͼˮӡºÍͼƬˮӡ
ÔÚͼƬµÄ onload ʼþÀï»ñȡͼƬ¿í¸ß£¬¸ù¾ÝͼƬ´óСÉú³ÉˮӡÇøÓò£¬ÕÚµ²ÔÚͼƬÉϲ㣬dom ÄÚÈÝΪˮӡµÄÎÄ°¸»òÕßÆäËûÐÅÏ¢£¬ÊµÏÖ·½Ê½±È½Ï¼òµ¥¡£
const wrap = document.querySelector('#ReactApp');
const { clientWidth, clientHeight } = wrap;
const waterHeight = 120;
const waterWidth = 180;
// ¼ÆËã¸öÊý
const [columns, rows] = [~~(clientWidth / waterWidth), ~~(clientHeight / waterHeight)]
for (let i = 0; i < columns; i++) {
for (let j = 0; j <= rows; j++) {
const waterDom = document.createElement('div');
// ¶¯Ì¬ÉèÖÃÆ«ÒÆÖµ
waterDom.setAttribute('style', `
width: ${waterWidth}px;
height: ${waterHeight}px;
left: ${waterWidth + (i - 1) * waterWidth + 10}px;
top: ${waterHeight + (j - 1) * waterHeight + 10}px;
color: #000;
position: absolute`
);
waterDom.innerText = '²âÊÔˮӡ';
wrap.appendChild(waterDom);
}
}
Óŵ㣺¼òµ¥Ò×ʵÏÖ£»È±µã£ºÍ¼Æ¬¹ý´ó»òÕß¹ý¶à»áÓÐÐÔÄÜÓ°Ï죻Ч¹ûչʾ£º
3£¬canvas ʵÏÖ·½Ê½£¨µÚÒ»°æʵÏÖ·½°¸£©·½·¨Ò»£ºÖ±½ÓÔÚͼƬÉϲÙ×÷
·Ï»°²»¶à˵£¬Ö±½ÓÉÏ´úÂë
useEffect(() => {
// gif ͼ²»Ö§³Ö
if (src && src.includes('.gif')) {
setShowImg(true);
}
image.onload = function () {
try {
// ̫СµÄͼ²»¼ÓÔØˮӡ
if (image.width < 10) {
setIsDataError(true);
props.setIsDataError && props.setIsDataError(true);
return;
}
const canvas = canvasRef.current;
canvas.width = image.width;
canvas.height = image.height;
// ÉèÖÃˮӡ
const font = `${Math.min(Math.max(Math.floor(innerCanvas.width / 14), 14), 48)}px` || fontSize;
innerContext.font = `${font} ${fontFamily}`;
innerContext.textBaseline = 'hanging';
innerContext.rotate(rotate * Math.PI / 180);
innerContext.lineWidth = lineWidth;
innerContext.strokeStyle = strokeStyle;
innerContext.strokeText(text, 0, innerCanvas.height / 4 * 3);
innerContext.fillStyle = fillStyle;
innerContext.fillText(text, 0, innerCanvas.height / 4 * 3);
const context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
context.rect(0, 0, image.width || 200, image.height || 200);
// ÉèÖÃˮӡ¸¡²ã
const pattern = context.createPattern(innerCanvas, 'repeat');
context.fillStyle = pattern;
context.fill();
} catch (err) {
console.info(err);
setShowImg(true);
}
};
image.onerror = function () {
setShowImg(true);
};
}, [src]);
Óŵ㣺´¿Ç°¶ËʵÏÖ·½Ê½£¬ÓÒ¼ü¸´ÖƵÄͼƬҲÊÇÓÐˮӡµÄ£»È±µã£º²»Ö§³Ö gif£¬Í¼Æ¬±ØÐëÖ§³Ö¿çÓò£»Ð§¹ûչʾ£ºÏÂÎĸø³ö¡£
·½·¨¶þ£ºcanvas Éú³Éˮӡ url ¸³Öµ¸ø css background ÊôÐÔ
export const getBase64Background = (props) => {
const { nick, empId } = GlobalConfig.userInfo;
const {
rotate = -20,
height = 75,
width = 85,
text = `${nick}-${empId}`,
fontSize = '14px',
lineWidth = 2,
fontFamily = 'microsoft yahei',
strokeStyle = 'rgba(255, 255, 255, .15)',
fillStyle = 'rgba(0, 0, 0, 0.15)',
position = { x: 30, y: 30 },
} = props;
const image = new Image();
image.crossOrigin = 'Anonymous';
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
context.font = `${fontSize} ${fontFamily}`;
context.lineWidth = lineWidth;
context.rotate(rotate * Math.PI / 180);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.textAlign = 'center';
context.textBaseline = 'hanging';
context.strokeText(text, position.x, position.y);
context.fillText(text, position.x, position.y);
return canvas.toDataURL('image/png');
};
// ʹÓ÷½Ê½
<img src="https://xxx.xxx.jpg" />
<div className="warter-mark-area" style={{ backgroundImage: `url(${getBase64Background({})})` }} />
Óŵ㣺´¿Ç°¶ËʵÏÖ·½Ê½£¬Ö§³Ö¿çÓò£¬Ö§³Ö git ͼˮӡ£»È±µã£ºÉú³ÉµÄ base64 url ±È½Ï´ó£»Ð§¹ûչʾ£ºÏÂÎĸø³ö¡£Æäʵ¸ù¾ÝÕâÁ½ÖÖ canvas µÄʵÏÖ·½Ê½¿ÉÒÔÇáËɵÄÏë³öµÚÈýÖÖ·½Ê½£¬¾ÍÊÇÔÚͼƬµÄÉϲãÕÚÒ»²ã µÚÒ»·½·¨ÖеķÇͼƬµÄ canvas£¬ÕâÑù¾ÍÄÜÍêÃÀµÄ±ÜÃâÁ½ÖÖ·½°¸µÄȱµã¡£µ«ÊÇÍ£ÁôƬ¿ÌÏëһϣ¬Á½ÖÖ·½°¸µÄ½áºÏ£¬»¹ÊÇʹÓà canvas È¥»æÖÆ£¬ÊDz»ÊÇÓиü¼òµ¥Ò׶®µÄ·½Ê½ÄØ¡£¶Ô£¬Óà svg Ìæ´ú¡£
4£¬SVG ·½Ê½£¨ÕýÔÚʹÓõķ½°¸£©¸ø³öÒ»¸ö react °æµÄˮӡ×é¼þ¡£
export const WaterMark = (props) => {
// »ñȡˮӡÊý¾Ý
const { nick, empId } = GlobalConfig.userInfo;
const boxRef = React.createRef();
const [waterMarkStyle, setWaterMarkStyle] = useState('180px 120px');
const [isError, setIsError] = useState(false);
const {
src, text = `${nick}-${empId}`, height: propsHeight, showSrc, img, nick, empId
} = props;
// ÉèÖñ³¾°Í¼ºÍ±³¾°Í¼Ñùʽ
const boxStyle = {
backgroundSize: waterMarkStyle,
backgroundImage: `url("data:image/svg+xml;utf8,<svg width=\'100%\' height=\'100%\' xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\'><text width=\'100%\' height=\'100%\' x=\'20\' y=\'68\' transform=\'rotate(-20)\' fill=\'rgba(0, 0, 0, 0.2)\' font-size=\'14\' stroke=\'rgba(255, 255, 255, .2)\' stroke-width=\'1\'>${text}</text></svg>")`,
};
const onLoad = (e) => {
const dom = e.target;
const {
previousSibling, nextSibling, offsetLeft, offsetTop,
} = dom;
// »ñȡͼƬ¿í¸ß
const { width, height } = getComputedStyle(dom);
if (parseInt(width.replace('px', '')) < 180) {
setWaterMarkStyle(`${width} ${height.replace('px', '') / 2}px`);
};
previousSibling.style.height = height;
previousSibling.style.width = width;
previousSibling.style.top = `${offsetTop}px`;
previousSibling.style.left = `${offsetLeft}px`;
// ¼ÓÔØ loading Òþ²Ø
nextSibling.style.display = 'none';
};
const onError = (event) => {
setIsError(true);
};
return (
<div className={styles.water_mark_wrapper} ref={boxRef}>
<div className={styles.water_mark_box} style={boxStyle} />
{isError
? <ErrorSourceData src={src} showSrc={showSrc} height={propsHeight} text="ͼƬ¼ÓÔØ´íÎó" helpText="µã»÷¸´ÖÆͼƬÁ´½Ó" />
: (
<>
<img onLoad={onLoad} referrerPolicy="no-referrer" onError={onError} src={src} alt="ͼƬÏÔʾ´íÎó" />
<Icon className={styles.img_loading} type="loading" />
</>
)
}
</div>
);
};
Óŵ㣺֧³Ö gif ͼˮӡ£¬²»´æÔÚ¿çÓòÎÊÌ⣬ʹÓà repeat ÊôÐÔ£¬ÎÞ²åÈë dom ¹ý³Ì£¬ÎÞÐÔÄÜÎÊÌ⣻ȱµã£º¡£¡£¡£dom ½á¹¹Õ¹Ê¾£º
5£¬Ð§¹ûͼչʾcanvas ºÍ svg ʵÏÖµÄЧ¹ûÔÚչʾÉÏûÓкܴóµÄÇø±ð£¬ËùÒÔЧ¹ûͼ¾ÍÒ»ÕÅͼȫ²¿Õ¹Ê¾ÁË¡£
Èç¹û°Ñ watermark µÄ dom ɾ³ýÁË£¬Í¼Æ¬²»¾ÍÊÇÎÞˮӡÁËÂ𣿴𰸣º¿ÉÒÔÀûÓà MutationObserver ¼àÌý water µÄ½Úµã£¬Èç¹û½Úµã±»Ð޸ģ¬Í¼Æ¬Ò²ËæÖ®Òþ²Ø£»
Êó±êÓÒ¼ü¸´ÖÆͼƬ£¿´ð°¸£ºÈ«²¿µÄͼƬ¶¼½ûÓÃÁËÓÒ¼ü¹¦ÄÜ
Èç¹û´Ó¿ØÖÆ̨µÄnetwork»ñȡͼƬÐÅÏ¢ÄØ£¿´ð°¸£º´Ë²Ù×÷ÔÝʱûÓÐÏëµ½ºÃµÄ½â¾ö°ì·¨£¬½¨Òé²ÉÓúó¶ËʵÏÖ·½°¸
Ç°¶ËʵÏÖµÄˮӡ·½°¸Ê¼ÖÕÖ»ÊÇÒ»ÖÖÁÙʱ·½°¸£¬ÒµÎñºó¶ËʵÏÖÓֺķѷþÎñÆ÷×ÊÔ´£¬Æäʵ×îÀíÏëµÄ½â¾ö·½Ê½¾ÍÊÇÌṩһ¸ö¶ÀÁ¢µÄˮӡ·þÎñ£¬ËäÈ»¼ÓÔعý³ÌÖлáÂÔÓÐÑÓ³Ù£¬µ«ÊÇÏà¶ÔÓëÊý¾Ý°²È«À´Ëµ£¬ºÁÃ뼶µÄÑÓ³Ù»¹ÊÇ¿ÉÒÔ½ÓÊܵģ¬ÕâÑùÓÖÄܱ£Ö¤²»Ó°ÏìÒµÎñµÄ·þÎñÎȶ¨ÐÔ¡£ÔÚÿÌìµÄ´ðÒɹý³ÌÖУ¬Ò²»áÓкܶàÒµÎñ·½À´ÕÒÎÒ¹µÍ¨Ë®Ó¡ÕÚµ²·çÏÕµãµÄÎÊÌ⣬ÿ´ÎÖ»ÄÜÓÃÊý¾Ý°²È«µÄÖØÒªÐÔÀ´»Ø¸´ËûÃÇ£¬µ±È»£¬Ë®Ó¡µÄ´óС£¬Í¸Ã÷¶È£¬Ãܼ¯³Ì¶ÈÒ²¶¼ÔÚ²»¶ÏµÄµ÷ÓÅÖУ¬ÏàÐÅ»áÓÐÒ»¸ö°æ±¾£¬¼ÈÄÜÆðµ½Ë®Ó¡µÄ×÷Óã¬Ò²ÄܸüºÃµÄ½â¾öÕÚµ²ÎÊÌâ¡£
±¾ÎÄ×÷ÕߣºES2049 /²·Â¶ ±¾ÎÄÁ´½Ó£ºhttps://segmentfault.com/a/1190000040425430
±¾ÎÄ·ÖÏí×Ô VueÖÐÎÄÉçÇø ΢ÐŹ«Öںţ¬Ç°Íù²é¿´
ÈçÓÐÇÖȨ£¬ÇëÁªÏµ cloudcommunity@tencent.com ɾ³ý¡£
±¾ÎIJÎÓë?ÌÚѶÔÆ×ÔýÌå·ÖÏí¼Æ»®? £¬»¶ÓÈÈ°®Ð´×÷µÄÄãÒ»Æð²ÎÓ룡