feat：转账插件
This commit is contained in:
@@ -0,0 +1,734 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user