iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
237 lines (216 loc) • 7.92 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _vueTypes = require('../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _configConsumerProps = require('../config-provider/configConsumerProps');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
/**
* 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比
*
* @param context
* @see 其实类型 CanvasRenderingContext2D
*/
var getPixelRatio = function getPixelRatio(context) {
if (!context) {
return 1;
}
var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
exports['default'] = {
name: 'AWaterMark',
props: {
/** 类名 */
customClass: _vueTypes2['default'].string,
/** 样式 */
customStyle: _vueTypes2['default'].object,
/** 水印样式 */
markStyle: _vueTypes2['default'].object,
/** 水印类名 */
markClassName: _vueTypes2['default'].string,
/** 水印之间的水平间距 */
gapX: _vueTypes2['default'].number.def(212),
/** 水印之间的垂直间距 */
gapY: _vueTypes2['default'].number.def(212),
/** 追加的水印元素的z-index */
zIndex: _vueTypes2['default'].number.def(9),
/** 水印的宽度 */
width: _vueTypes2['default'].number.def(120),
/** 水印的高度 */
height: _vueTypes2['default'].number.def(64),
/** 水印在canvas 画布上绘制的垂直偏移量，正常情况下，水印绘制在中间位置, 即 offsetTop = gapY / 2 */
offsetTop: _vueTypes2['default'].number, // 水印图片距离绘制 canvas 单元的顶部距离
/** 水印在canvas 画布上绘制的水平偏移量, 正常情况下，水印绘制在中间位置, 即 offsetTop = gapX / 2 */
offsetLeft: _vueTypes2['default'].number,
/** 水印绘制时，旋转的角度，单位 ° */
rotate: _vueTypes2['default'].number.def(-22),
/** 高清印图片源, 为了高清屏幕显示，建议使用 2倍或3倍图，优先使用图片渲染水印。 */
image: _vueTypes2['default'].string,
/** 水印文字内容 */
content: _vueTypes2['default'].string,
/** 文字颜色 */
fontColor: _vueTypes2['default'].string.def('rgba(0,0,0,.15)'),
/** 文字样式 */
fontStyle: _vueTypes2['default'].oneOf(['none', 'normal', 'italic', 'oblique']).def('normal'),
/** 文字族 */
fontFamily: _vueTypes2['default'].string.def('sans-serif'),
/** 文字粗细 */
fontWeight: _vueTypes2['default'].number.def(400),
/** 文字大小 */
fontSize: _vueTypes2['default'].number.def(16)
},
data: function data() {
return {
base64Url: ''
};
},
computed: {
watchParams: function watchParams() {
var _$props = this.$props,
gapX = _$props.gapX,
gapY = _$props.gapY,
offsetLeft = _$props.offsetLeft,
offsetTop = _$props.offsetTop,
rotate = _$props.rotate,
fontStyle = _$props.fontStyle,
fontWeight = _$props.fontWeight,
width = _$props.width,
height = _$props.height,
fontFamily = _$props.fontFamily,
fontColor = _$props.fontColor,
image = _$props.image,
content = _$props.content,
fontSize = _$props.fontSize;
return {
gapX: gapX,
gapY: gapY,
offsetLeft: offsetLeft,
offsetTop: offsetTop,
rotate: rotate,
fontStyle: fontStyle,
fontWeight: fontWeight,
width: width,
height: height,
fontFamily: fontFamily,
fontColor: fontColor,
image: image,
content: content,
fontSize: fontSize
};
}
},
inject: {
configProvider: { 'default': function _default() {
return _configConsumerProps.ConfigConsumerProps;
} }
},
watch: {
watchParams: {
handler: function handler(e) {
this.initCanvas();
},
immediate: true
}
},
methods: {
initCanvas: function initCanvas() {
var _this = this;
var _$props2 = this.$props,
gapX = _$props2.gapX,
gapY = _$props2.gapY,
offsetLeft = _$props2.offsetLeft,
offsetTop = _$props2.offsetTop,
width = _$props2.width,
height = _$props2.height,
rotate = _$props2.rotate,
image = _$props2.image,
fontSize = _$props2.fontSize,
fontStyle = _$props2.fontStyle,
fontWeight = _$props2.fontWeight,
fontFamily = _$props2.fontFamily,
fontColor = _$props2.fontColor,
content = _$props2.content;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var ratio = getPixelRatio(ctx);
var canvasWidth = (gapX + width) * ratio + 'px';
var canvasHeight = (gapY + height) * ratio + 'px';
var canvasOffsetLeft = offsetLeft || gapX / 2;
var canvasOffsetTop = offsetTop || gapY / 2;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
if (ctx) {
ctx.translate(canvasOffsetLeft * ratio, canvasOffsetTop * ratio);
ctx.rotate(Math.PI / 180 * Number(rotate));
var markWidth = width * ratio;
var markHeight = height * ratio;
if (image) {
var img = new Image();
img.crossOrigin = 'anonymous';
img.referrerPolicy = 'no-referrer';
img.src = image;
img.onload = function () {
ctx.drawImage(img, 0, 0, markWidth, markHeight);
_this.base64Url = canvas.toDataURL();
};
} else if (content) {
var markSize = Number(fontSize) * ratio;
ctx.font = fontStyle + ' normal ' + fontWeight + ' ' + markSize + 'px/' + markHeight + 'px ' + fontFamily;
ctx.fillStyle = fontColor;
ctx.fillText(content, 0, 0);
this.base64Url = canvas.toDataURL();
}
} else {
console.error('当前环境不支持Canvas');
}
}
},
render: function render() {
var h = arguments[0];
var customizePrefixCls = this.prefixCls,
$slots = this.$slots,
$props = this.$props,
base64Url = this.base64Url;
var customStyle = $props.customStyle,
customClass = $props.customClass,
markClassName = $props.markClassName,
zIndex = $props.zIndex,
markStyle = $props.markStyle,
gapX = $props.gapX,
width = $props.width;
var getPrefixCls = this.configProvider.getPrefixCls;
var prefixCls = getPrefixCls('water-mark', customizePrefixCls);
var wrapperCls = (0, _classnames2['default'])(prefixCls + '-wrapper', customClass);
var waterMarkCls = (0, _classnames2['default'])(prefixCls, markClassName);
return h(
'div',
{
style: (0, _extends3['default'])({
position: 'relative'
}, customStyle),
'class': wrapperCls
},
[$slots['default'], h('div', {
'class': waterMarkCls,
style: (0, _extends3['default'])({
zIndex: zIndex,
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
backgroundSize: gapX + width + 'px',
pointerEvents: 'none',
backgroundRepeat: 'repeat',
backgroundImage: 'url(\'' + base64Url + '\')'
}, markStyle)
})]
);
}
};