735 lines
25 KiB
Vue
735 lines
25 KiB
Vue
|
<template>
|
||
|
|
<view
|
||
|
|
class="u-canvas"
|
||
|
|
:id="rootId"
|
||
|
|
:style="{
|
||
|
|
width: useRootHeightAndWidth ? '100%' : actualWidth + unit,
|
||
|
|
height: useRootHeightAndWidth ? '100%' : actualHeight + unit
|
||
|
|
}"
|
||
|
|
>
|
||
|
|
<!-- #ifdef MP || H5 -->
|
||
|
|
<canvas
|
||
|
|
class="u-canvas__canvas"
|
||
|
|
:id="canvasId"
|
||
|
|
:canvas-id="canvasId"
|
||
|
|
type="2d"
|
||
|
|
:disable-scroll="disableScroll"
|
||
|
|
:style="{ width: actualWidth + unit, height: actualHeight + unit }"
|
||
|
|
@touchstart="onTouchStart"
|
||
|
|
@touchmove="onTouchMove"
|
||
|
|
@touchend="onTouchEnd"
|
||
|
|
/>
|
||
|
|
<!-- #endif -->
|
||
|
|
|
||
|
|
<!-- #ifdef APP-PLUS -->
|
||
|
|
<canvas
|
||
|
|
class="u-canvas__canvas"
|
||
|
|
:id="canvasId"
|
||
|
|
:canvas-id="canvasId"
|
||
|
|
:disable-scroll="disableScroll"
|
||
|
|
:style="{ width: actualWidth + unit, height: actualHeight + unit }"
|
||
|
|
@touchstart="onTouchStart"
|
||
|
|
@touchmove="onTouchMove"
|
||
|
|
@touchend="onTouchEnd"
|
||
|
|
/>
|
||
|
|
<!-- #endif -->
|
||
|
|
|
||
|
|
<!-- #ifdef APP-NVUE -->
|
||
|
|
<gcanvas
|
||
|
|
class="u-canvas__canvas"
|
||
|
|
ref="gcanvas"
|
||
|
|
:style="{ width: actualWidth + unit, height: actualHeight + unit }"
|
||
|
|
@touchstart="onTouchStart"
|
||
|
|
@touchmove="onTouchMove"
|
||
|
|
@touchend="onTouchEnd"
|
||
|
|
/>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
import {
|
||
|
|
enable,
|
||
|
|
WeexBridge,
|
||
|
|
Image as GImage
|
||
|
|
} from '../../libs/util/gcanvas/index.js';
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'u-canvas',
|
||
|
|
emits: ['ready', 'touchstart', 'touchmove', 'touchend'],
|
||
|
|
props: {
|
||
|
|
canvasId: {
|
||
|
|
type: String,
|
||
|
|
default: () => `u-canvas${Math.floor(Math.random() * 1000000)}`
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: 300
|
||
|
|
},
|
||
|
|
height: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: 300
|
||
|
|
},
|
||
|
|
unit: {
|
||
|
|
type: String,
|
||
|
|
default: 'px'
|
||
|
|
},
|
||
|
|
useRootHeightAndWidth: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
bgColor: {
|
||
|
|
type: String,
|
||
|
|
default: '#ffffff'
|
||
|
|
},
|
||
|
|
disableScroll: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
rootId: `u-canvas-root-${Math.floor(Math.random() * 1000000)}`,
|
||
|
|
ctx: null,
|
||
|
|
widthLocal: this.parseSize(this.width),
|
||
|
|
heightLocal: this.parseSize(this.height),
|
||
|
|
fontSize: 12,
|
||
|
|
fontFamily: 'sans-serif',
|
||
|
|
fontWeight: 'normal',
|
||
|
|
dpr: 1
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
actualWidth() {
|
||
|
|
return this.useRootHeightAndWidth ? this.widthLocal : this.parseSize(this.width);
|
||
|
|
},
|
||
|
|
actualHeight() {
|
||
|
|
return this.useRootHeightAndWidth ? this.heightLocal : this.parseSize(this.height);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
width() {
|
||
|
|
this.refresh();
|
||
|
|
},
|
||
|
|
height() {
|
||
|
|
this.refresh();
|
||
|
|
},
|
||
|
|
bgColor() {
|
||
|
|
this.clearCanvas();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this._canvasNode = null;
|
||
|
|
this._selectorResult = null;
|
||
|
|
this._canvasElement = null;
|
||
|
|
this._imageCache = Object.create(null);
|
||
|
|
this._isNvue = false;
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.initCanvas();
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
parseSize(value) {
|
||
|
|
if (typeof value === 'number') {
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
if (typeof value !== 'string') {
|
||
|
|
return 0;
|
||
|
|
}
|
||
|
|
if (value.endsWith('rpx') || value.endsWith('upx')) {
|
||
|
|
return uni.upx2px(parseFloat(value));
|
||
|
|
}
|
||
|
|
if (value.endsWith('px')) {
|
||
|
|
return parseFloat(value) || 0;
|
||
|
|
}
|
||
|
|
return parseFloat(value) || 0;
|
||
|
|
},
|
||
|
|
onTouchStart(event) {
|
||
|
|
this.$emit('touchstart', event);
|
||
|
|
},
|
||
|
|
onTouchMove(event) {
|
||
|
|
this.$emit('touchmove', event);
|
||
|
|
},
|
||
|
|
onTouchEnd(event) {
|
||
|
|
this.$emit('touchend', event);
|
||
|
|
},
|
||
|
|
async getCanvasNode(id = this.canvasId, isCanvas = true) {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
try {
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
setTimeout(() => {
|
||
|
|
const gcanvas = this.$refs.gcanvas;
|
||
|
|
if (!gcanvas) {
|
||
|
|
resolve(false);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this._isNvue = true;
|
||
|
|
resolve(enable(gcanvas, { bridge: WeexBridge }));
|
||
|
|
}, 100);
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifndef APP-NVUE
|
||
|
|
uni.createSelectorQuery()
|
||
|
|
.in(this)
|
||
|
|
.select(`#${id}`)
|
||
|
|
.fields(
|
||
|
|
{
|
||
|
|
node: isCanvas,
|
||
|
|
size: true
|
||
|
|
},
|
||
|
|
(res) => {
|
||
|
|
resolve(res || false);
|
||
|
|
}
|
||
|
|
)
|
||
|
|
.exec();
|
||
|
|
// #endif
|
||
|
|
} catch (error) {
|
||
|
|
console.error('获取画布节点失败:', error);
|
||
|
|
resolve(false);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getCanvasElement() {
|
||
|
|
return this._canvasElement || null;
|
||
|
|
},
|
||
|
|
getRawContext() {
|
||
|
|
return this.ctx;
|
||
|
|
},
|
||
|
|
getCanvasContext() {
|
||
|
|
// #ifdef APP-PLUS
|
||
|
|
return uni.createCanvasContext(this.canvasId, this);
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
return this._canvasElement && typeof this._canvasElement.getContext === 'function'
|
||
|
|
? this._canvasElement.getContext('2d')
|
||
|
|
: null;
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef MP || H5
|
||
|
|
return this._canvasElement && typeof this._canvasElement.getContext === 'function'
|
||
|
|
? this._canvasElement.getContext('2d')
|
||
|
|
: null;
|
||
|
|
// #endif
|
||
|
|
},
|
||
|
|
async setNewSize() {
|
||
|
|
const rootNode = await this.getCanvasNode(this.rootId, false);
|
||
|
|
if (!rootNode) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (rootNode.width) {
|
||
|
|
this.widthLocal = rootNode.width;
|
||
|
|
}
|
||
|
|
if (rootNode.height) {
|
||
|
|
this.heightLocal = rootNode.height;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async initCanvas(force = false) {
|
||
|
|
try {
|
||
|
|
if (this.useRootHeightAndWidth) {
|
||
|
|
await this.setNewSize();
|
||
|
|
}
|
||
|
|
if (this.ctx && !force) {
|
||
|
|
this.$emit('ready', {
|
||
|
|
width: this.actualWidth,
|
||
|
|
height: this.actualHeight
|
||
|
|
});
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
|
||
|
|
this._canvasNode = await this.getCanvasNode(this.canvasId);
|
||
|
|
if (!this._canvasNode) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
this._selectorResult = this._canvasNode;
|
||
|
|
this._canvasElement = this._canvasNode.node || this._canvasNode;
|
||
|
|
this.dpr = uni.getSystemInfoSync().pixelRatio || 1;
|
||
|
|
|
||
|
|
// #ifdef MP || H5
|
||
|
|
if (this._canvasElement) {
|
||
|
|
this._canvasElement.width = Math.ceil(this.actualWidth * this.dpr);
|
||
|
|
this._canvasElement.height = Math.ceil(this.actualHeight * this.dpr);
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
this.ctx = this.getCanvasContext();
|
||
|
|
if (!this.ctx) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
// #ifdef MP || H5
|
||
|
|
if (typeof this.ctx.setTransform === 'function') {
|
||
|
|
this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
|
||
|
|
} else if (typeof this.ctx.scale === 'function') {
|
||
|
|
this.ctx.scale(this.dpr, this.dpr);
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
this.applyFont();
|
||
|
|
this.clearCanvas();
|
||
|
|
this.$emit('ready', {
|
||
|
|
width: this.actualWidth,
|
||
|
|
height: this.actualHeight
|
||
|
|
});
|
||
|
|
return true;
|
||
|
|
} catch (error) {
|
||
|
|
console.error('初始化Canvas失败:', error);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
refresh() {
|
||
|
|
return this.initCanvas(true);
|
||
|
|
},
|
||
|
|
getWidth() {
|
||
|
|
return this.actualWidth;
|
||
|
|
},
|
||
|
|
getHeight() {
|
||
|
|
return this.actualHeight;
|
||
|
|
},
|
||
|
|
clearCanvas() {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
this.clearRect(0, 0, this.actualWidth, this.actualHeight);
|
||
|
|
if (this.bgColor && this.bgColor !== 'transparent') {
|
||
|
|
this.beginPath();
|
||
|
|
this.rect(0, 0, this.actualWidth, this.actualHeight);
|
||
|
|
this.setFillStyle(this.bgColor);
|
||
|
|
this.fill();
|
||
|
|
}
|
||
|
|
this.draw();
|
||
|
|
},
|
||
|
|
callContext(method, ...args) {
|
||
|
|
if (this.ctx && typeof this.ctx[method] === 'function') {
|
||
|
|
return this.ctx[method](...args);
|
||
|
|
}
|
||
|
|
return undefined;
|
||
|
|
},
|
||
|
|
rect(x, y, width, height) {
|
||
|
|
return this.callContext('rect', x, y, width, height);
|
||
|
|
},
|
||
|
|
clearRect(x, y, width, height) {
|
||
|
|
return this.callContext('clearRect', x, y, width, height);
|
||
|
|
},
|
||
|
|
fillRect(x, y, width, height) {
|
||
|
|
return this.callContext('fillRect', x, y, width, height);
|
||
|
|
},
|
||
|
|
strokeRect(x, y, width, height) {
|
||
|
|
return this.callContext('strokeRect', x, y, width, height);
|
||
|
|
},
|
||
|
|
fill() {
|
||
|
|
return this.callContext('fill');
|
||
|
|
},
|
||
|
|
stroke() {
|
||
|
|
return this.callContext('stroke');
|
||
|
|
},
|
||
|
|
beginPath() {
|
||
|
|
return this.callContext('beginPath');
|
||
|
|
},
|
||
|
|
closePath() {
|
||
|
|
return this.callContext('closePath');
|
||
|
|
},
|
||
|
|
moveTo(x, y) {
|
||
|
|
return this.callContext('moveTo', x, y);
|
||
|
|
},
|
||
|
|
lineTo(x, y) {
|
||
|
|
return this.callContext('lineTo', x, y);
|
||
|
|
},
|
||
|
|
arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
|
||
|
|
return this.callContext('arc', x, y, radius, startAngle, endAngle, anticlockwise);
|
||
|
|
},
|
||
|
|
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
|
||
|
|
return this.callContext('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y);
|
||
|
|
},
|
||
|
|
quadraticCurveTo(cpx, cpy, x, y) {
|
||
|
|
return this.callContext('quadraticCurveTo', cpx, cpy, x, y);
|
||
|
|
},
|
||
|
|
clip() {
|
||
|
|
return this.callContext('clip');
|
||
|
|
},
|
||
|
|
save() {
|
||
|
|
return this.callContext('save');
|
||
|
|
},
|
||
|
|
restore() {
|
||
|
|
return this.callContext('restore');
|
||
|
|
},
|
||
|
|
translate(x, y) {
|
||
|
|
return this.callContext('translate', x, y);
|
||
|
|
},
|
||
|
|
rotate(angle) {
|
||
|
|
return this.callContext('rotate', angle);
|
||
|
|
},
|
||
|
|
scale(x, y) {
|
||
|
|
return this.callContext('scale', x, y);
|
||
|
|
},
|
||
|
|
setFillStyle(color) {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setFillStyle === 'function') {
|
||
|
|
this.ctx.setFillStyle(color);
|
||
|
|
} else {
|
||
|
|
this.ctx.fillStyle = color;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setStrokeStyle(color) {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setStrokeStyle === 'function') {
|
||
|
|
this.ctx.setStrokeStyle(color);
|
||
|
|
} else {
|
||
|
|
this.ctx.strokeStyle = color;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setLineWidth(width) {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setLineWidth === 'function') {
|
||
|
|
this.ctx.setLineWidth(width);
|
||
|
|
} else {
|
||
|
|
this.ctx.lineWidth = width;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setLineCap(lineCap = 'round') {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setLineCap === 'function') {
|
||
|
|
this.ctx.setLineCap(lineCap);
|
||
|
|
} else {
|
||
|
|
this.ctx.lineCap = lineCap;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setLineJoin(lineJoin = 'round') {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setLineJoin === 'function') {
|
||
|
|
this.ctx.setLineJoin(lineJoin);
|
||
|
|
} else {
|
||
|
|
this.ctx.lineJoin = lineJoin;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setTextAlign(align = 'left') {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setTextAlign === 'function') {
|
||
|
|
this.ctx.setTextAlign(align);
|
||
|
|
} else {
|
||
|
|
this.ctx.textAlign = align;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setTextBaseline(baseline = 'alphabetic') {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setTextBaseline === 'function') {
|
||
|
|
this.ctx.setTextBaseline(baseline);
|
||
|
|
} else {
|
||
|
|
this.ctx.textBaseline = baseline;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setFontSize(fontSize) {
|
||
|
|
this.fontSize = Number(fontSize) || this.fontSize;
|
||
|
|
if (this.ctx && typeof this.ctx.setFontSize === 'function') {
|
||
|
|
this.ctx.setFontSize(this.fontSize);
|
||
|
|
}
|
||
|
|
this.applyFont();
|
||
|
|
},
|
||
|
|
setFont(font) {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if ('font' in this.ctx) {
|
||
|
|
this.ctx.font = font;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const matched = String(font).match(/(\d+(?:\.\d+)?)px/);
|
||
|
|
if (matched) {
|
||
|
|
this.fontSize = Number(matched[1]);
|
||
|
|
}
|
||
|
|
this.applyFont();
|
||
|
|
},
|
||
|
|
setGlobalAlpha(alpha) {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setGlobalAlpha === 'function') {
|
||
|
|
this.ctx.setGlobalAlpha(alpha);
|
||
|
|
} else {
|
||
|
|
this.ctx.globalAlpha = alpha;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setShadow(offsetX = 0, offsetY = 0, blur = 0, color = 'rgba(0,0,0,0)') {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
if (typeof this.ctx.setShadow === 'function') {
|
||
|
|
this.ctx.setShadow(offsetX, offsetY, blur, color);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.ctx.shadowOffsetX = offsetX;
|
||
|
|
this.ctx.shadowOffsetY = offsetY;
|
||
|
|
this.ctx.shadowBlur = blur;
|
||
|
|
this.ctx.shadowColor = color;
|
||
|
|
},
|
||
|
|
setLineStyle(lineColor, lineWidth) {
|
||
|
|
this.setLineCap('round');
|
||
|
|
this.setLineJoin('round');
|
||
|
|
this.setStrokeStyle(lineColor);
|
||
|
|
this.setLineWidth(lineWidth);
|
||
|
|
},
|
||
|
|
applyFont() {
|
||
|
|
if (!this.ctx) return;
|
||
|
|
const font = `${this.fontWeight === 'normal' ? '' : `${this.fontWeight} `}${this.fontSize}px ${this.fontFamily}`.trim();
|
||
|
|
if ('font' in this.ctx) {
|
||
|
|
this.ctx.font = font;
|
||
|
|
} else if (typeof this.ctx.setFont === 'function') {
|
||
|
|
this.ctx.setFont(font);
|
||
|
|
} else if (typeof this.ctx.setFontSize === 'function') {
|
||
|
|
this.ctx.setFontSize(this.fontSize);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fillText(text, x, y) {
|
||
|
|
return this.callContext('fillText', String(text), x, y);
|
||
|
|
},
|
||
|
|
measureText(text) {
|
||
|
|
if (this.ctx && typeof this.ctx.measureText === 'function') {
|
||
|
|
return this.ctx.measureText(String(text));
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
width: String(text).length * this.fontSize * 0.6
|
||
|
|
};
|
||
|
|
},
|
||
|
|
createLinearGradient(x0, y0, x1, y1) {
|
||
|
|
if (this.ctx && typeof this.ctx.createLinearGradient === 'function') {
|
||
|
|
return this.ctx.createLinearGradient(x0, y0, x1, y1);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
createRadialGradient(x0, y0, r0, x1, y1, r1) {
|
||
|
|
if (this.ctx && typeof this.ctx.createRadialGradient === 'function') {
|
||
|
|
return this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
|
||
|
|
}
|
||
|
|
return null;
|
||
|
|
},
|
||
|
|
loadImage(src) {
|
||
|
|
if (this._imageCache[src]) {
|
||
|
|
return Promise.resolve(this._imageCache[src]);
|
||
|
|
}
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
let image = null;
|
||
|
|
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
image = new GImage();
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef MP
|
||
|
|
const canvas = this.getCanvasElement();
|
||
|
|
if (canvas && typeof canvas.createImage === 'function') {
|
||
|
|
image = canvas.createImage();
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef H5
|
||
|
|
image = new Image();
|
||
|
|
image.crossOrigin = 'anonymous';
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
if (!image) {
|
||
|
|
resolve(src);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
image.onload = () => {
|
||
|
|
this._imageCache[src] = image;
|
||
|
|
resolve(image);
|
||
|
|
};
|
||
|
|
image.onerror = reject;
|
||
|
|
image.src = src;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async drawImage(source, ...args) {
|
||
|
|
if (!this.ctx || typeof this.ctx.drawImage !== 'function') {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (typeof source !== 'string' || (typeof this.ctx.setFillStyle === 'function' && !this._isNvue)) {
|
||
|
|
this.ctx.drawImage(source, ...args);
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
const image = await this.loadImage(source);
|
||
|
|
this.ctx.drawImage(image, ...args);
|
||
|
|
return true;
|
||
|
|
},
|
||
|
|
draw(isLastDraw = false, callback) {
|
||
|
|
if (this.ctx && typeof this.ctx.draw === 'function') {
|
||
|
|
return this.ctx.draw(isLastDraw, callback);
|
||
|
|
}
|
||
|
|
if (typeof callback === 'function') {
|
||
|
|
setTimeout(callback, 0);
|
||
|
|
}
|
||
|
|
return undefined;
|
||
|
|
},
|
||
|
|
toTempFilePath(options = {}) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const width = options.width || this.actualWidth;
|
||
|
|
const height = options.height || this.actualHeight;
|
||
|
|
const request = {
|
||
|
|
x: options.x || 0,
|
||
|
|
y: options.y || 0,
|
||
|
|
width,
|
||
|
|
height,
|
||
|
|
destWidth: options.destWidth || width,
|
||
|
|
destHeight: options.destHeight || height,
|
||
|
|
fileType: options.fileType || 'png',
|
||
|
|
quality: options.quality === undefined ? 1 : options.quality
|
||
|
|
};
|
||
|
|
const success = (res) => {
|
||
|
|
if (typeof options.success === 'function') options.success(res);
|
||
|
|
resolve(res);
|
||
|
|
};
|
||
|
|
const fail = (err) => {
|
||
|
|
if (typeof options.fail === 'function') options.fail(err);
|
||
|
|
reject(err);
|
||
|
|
};
|
||
|
|
const complete = (res) => {
|
||
|
|
if (typeof options.complete === 'function') options.complete(res);
|
||
|
|
};
|
||
|
|
|
||
|
|
// #ifdef H5
|
||
|
|
const canvas = this.getCanvasElement() || (this.ctx && this.ctx.canvas);
|
||
|
|
if (canvas && typeof canvas.toDataURL === 'function') {
|
||
|
|
try {
|
||
|
|
let exportCanvas = canvas;
|
||
|
|
if (
|
||
|
|
request.x !== 0 ||
|
||
|
|
request.y !== 0 ||
|
||
|
|
request.width !== this.actualWidth ||
|
||
|
|
request.height !== this.actualHeight ||
|
||
|
|
request.destWidth !== request.width ||
|
||
|
|
request.destHeight !== request.height
|
||
|
|
) {
|
||
|
|
exportCanvas = document.createElement('canvas');
|
||
|
|
exportCanvas.width = request.destWidth;
|
||
|
|
exportCanvas.height = request.destHeight;
|
||
|
|
const exportCtx = exportCanvas.getContext('2d');
|
||
|
|
exportCtx.drawImage(
|
||
|
|
canvas,
|
||
|
|
request.x * this.dpr,
|
||
|
|
request.y * this.dpr,
|
||
|
|
request.width * this.dpr,
|
||
|
|
request.height * this.dpr,
|
||
|
|
0,
|
||
|
|
0,
|
||
|
|
request.destWidth,
|
||
|
|
request.destHeight
|
||
|
|
);
|
||
|
|
}
|
||
|
|
const mime = request.fileType === 'jpg' || request.fileType === 'jpeg'
|
||
|
|
? 'image/jpeg'
|
||
|
|
: 'image/png';
|
||
|
|
const res = {
|
||
|
|
tempFilePath: exportCanvas.toDataURL(mime, request.quality)
|
||
|
|
};
|
||
|
|
success(res);
|
||
|
|
complete(res);
|
||
|
|
return;
|
||
|
|
} catch (error) {
|
||
|
|
fail(error);
|
||
|
|
complete(error);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
// #ifdef APP-NVUE
|
||
|
|
if (this.ctx && typeof this.ctx.toTempFilePath === 'function') {
|
||
|
|
this.ctx.toTempFilePath(
|
||
|
|
request.x,
|
||
|
|
request.y,
|
||
|
|
request.width,
|
||
|
|
request.height,
|
||
|
|
request.destWidth,
|
||
|
|
request.destHeight,
|
||
|
|
request.fileType,
|
||
|
|
request.quality,
|
||
|
|
(res) => {
|
||
|
|
success(res);
|
||
|
|
complete(res);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// #endif
|
||
|
|
|
||
|
|
const canvasNode = this.getCanvasElement();
|
||
|
|
const uniOptions = {
|
||
|
|
...request,
|
||
|
|
canvasId: this.canvasId,
|
||
|
|
success,
|
||
|
|
fail,
|
||
|
|
complete
|
||
|
|
};
|
||
|
|
if (canvasNode) {
|
||
|
|
uniOptions.canvas = canvasNode;
|
||
|
|
}
|
||
|
|
uni.canvasToTempFilePath(uniOptions, this);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async exportImage(fileType = 'png', quality = 1) {
|
||
|
|
const res = await this.toTempFilePath({
|
||
|
|
fileType,
|
||
|
|
quality,
|
||
|
|
width: this.actualWidth,
|
||
|
|
height: this.actualHeight,
|
||
|
|
destWidth: this.actualWidth,
|
||
|
|
destHeight: this.actualHeight
|
||
|
|
});
|
||
|
|
return res.tempFilePath || res.apFilePath;
|
||
|
|
},
|
||
|
|
getImageData(options = {}) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const request = {
|
||
|
|
canvasId: this.canvasId,
|
||
|
|
x: options.x || 0,
|
||
|
|
y: options.y || 0,
|
||
|
|
width: options.width || this.actualWidth,
|
||
|
|
height: options.height || this.actualHeight,
|
||
|
|
success: (res) => {
|
||
|
|
if (typeof options.success === 'function') options.success(res);
|
||
|
|
resolve(res);
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
if (typeof options.fail === 'function') options.fail(err);
|
||
|
|
reject(err);
|
||
|
|
},
|
||
|
|
complete: options.complete
|
||
|
|
};
|
||
|
|
uni.canvasGetImageData(request, this);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
putImageData(options = {}) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const request = {
|
||
|
|
canvasId: this.canvasId,
|
||
|
|
x: options.x || 0,
|
||
|
|
y: options.y || 0,
|
||
|
|
width: options.width || this.actualWidth,
|
||
|
|
height: options.height || this.actualHeight,
|
||
|
|
data: options.data,
|
||
|
|
success: (res) => {
|
||
|
|
if (typeof options.success === 'function') options.success(res);
|
||
|
|
resolve(res);
|
||
|
|
},
|
||
|
|
fail: (err) => {
|
||
|
|
if (typeof options.fail === 'function') options.fail(err);
|
||
|
|
reject(err);
|
||
|
|
},
|
||
|
|
complete: options.complete
|
||
|
|
};
|
||
|
|
uni.canvasPutImageData(request, this);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.u-canvas {
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.u-canvas__canvas {
|
||
|
|
display: block;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
</style>
|