454 lines
11 KiB
Vue
454 lines
11 KiB
Vue
|
<!-- mosowe-canvas-image -->
|
|||
|
|
<template>
|
|||
|
|
<view class='mosowe-canvas-image'>
|
|||
|
|
<view class="slot-view" @click="createCanvas">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
<view class="canvas-wrap-box">
|
|||
|
|
<!-- 主面板绘制 -->
|
|||
|
|
<canvas class="canvas-wrap" canvas-id="canvas" :style="'width: '+ width +'px; height: '+ height +'px;'"></canvas>
|
|||
|
|
<!-- 这个是用来绘制圆形图片的 -->
|
|||
|
|
<canvas class="canvas-wrap" canvas-id="canvas-arc" :style="'width: '+ canvasArcWidth +'px; height: '+ canvasArcHeight +'px;'"></canvas>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import QR from './wxqrcode.js';
|
|||
|
|
export default {
|
|||
|
|
name: 'mosowe-canvas-image',
|
|||
|
|
components: {},
|
|||
|
|
props: {
|
|||
|
|
imgType: { // 图片类型
|
|||
|
|
type: String,
|
|||
|
|
default: 'jpg',
|
|||
|
|
validator: () => {
|
|||
|
|
return ['jpg', 'png'];
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
compress: { // 是否开启压缩
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
compressSize: { // 压缩界限，超过界限压缩，默认2M
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: 1024*1024*2
|
|||
|
|
},
|
|||
|
|
showPreview: { // 生成图像后是否预览
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
height: { // canvas高度
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: 200
|
|||
|
|
},
|
|||
|
|
width: { // canvas宽度
|
|||
|
|
type: [String, Number],
|
|||
|
|
default: 200
|
|||
|
|
},
|
|||
|
|
lists: {
|
|||
|
|
type: Array,
|
|||
|
|
default: () => {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
canvas: null,
|
|||
|
|
listsIndex: 0,
|
|||
|
|
listsLength: 0,
|
|||
|
|
canvasArc: null,
|
|||
|
|
canvasArcWidth: 100,
|
|||
|
|
canvasArcHeight: 100,
|
|||
|
|
compressQuality: 20,
|
|||
|
|
compressQualityH5: 5,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {},
|
|||
|
|
// 组件实例化之前
|
|||
|
|
beforeCreate () {},
|
|||
|
|
// 组件创建完成
|
|||
|
|
created () {
|
|||
|
|
this.canvas = uni.createCanvasContext('canvas', this);
|
|||
|
|
this.canvasArc = uni.createCanvasContext('canvas-arc', this);
|
|||
|
|
},
|
|||
|
|
// 组件挂载之前
|
|||
|
|
beforeMount () {},
|
|||
|
|
// 组件挂载之后
|
|||
|
|
mounted () {},
|
|||
|
|
// 组件数据更新时
|
|||
|
|
beforeUpdate () {},
|
|||
|
|
// 组价更新
|
|||
|
|
updated () {},
|
|||
|
|
// 组件销毁前
|
|||
|
|
beforeDestroy () {},
|
|||
|
|
// 组件销毁后
|
|||
|
|
destroyed () {},
|
|||
|
|
// 页面方法
|
|||
|
|
methods: {
|
|||
|
|
// 开始绘制
|
|||
|
|
createCanvas () {
|
|||
|
|
this.clearCanvas();
|
|||
|
|
if (this.lists.length === 0) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: 'lists不能为空',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.listsIndex = 0;
|
|||
|
|
this.listsLength = this.lists.length - 1;
|
|||
|
|
uni.showToast({
|
|||
|
|
title:'正在生成图片...',
|
|||
|
|
icon:'loading'
|
|||
|
|
})
|
|||
|
|
this.dataDrawCanvas();
|
|||
|
|
},
|
|||
|
|
// 数据绘制
|
|||
|
|
dataDrawCanvas () {
|
|||
|
|
let item = this.lists[this.listsIndex];
|
|||
|
|
if (item.type === 'image') { // 图片
|
|||
|
|
if (item.content.indexOf('https://') > -1) { // https://网络图片
|
|||
|
|
// #ifndef H5
|
|||
|
|
// 非H5
|
|||
|
|
this.downloadImageNotH5(item);
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
// H5
|
|||
|
|
this.downloadImageH5(item);
|
|||
|
|
// #endif
|
|||
|
|
} else { // 本地选择图片
|
|||
|
|
if (this.compress && item.hasOwnProperty('file') && item.file.size > this.compressSize) { // 大于限制2M压缩
|
|||
|
|
this.compressImage(item);
|
|||
|
|
} else {
|
|||
|
|
if (item.arc) {
|
|||
|
|
this.drawImageArc(item);
|
|||
|
|
} else {
|
|||
|
|
this.drawImage(item);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} else if (item.type === 'text') { // 文本
|
|||
|
|
this.drawText(item);
|
|||
|
|
} else if (item.type === 'rect') { // 矩形（线条）
|
|||
|
|
this.drawRect(item);
|
|||
|
|
} else if (item.type === 'arc') { // 圆形
|
|||
|
|
this.drawArc(item);
|
|||
|
|
} else if (item.type === 'qr') { // 二维码
|
|||
|
|
this.drawQR(item);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// #ifndef H5
|
|||
|
|
// https图片下载本地并绘制，非H5
|
|||
|
|
downloadImageNotH5 (item) {
|
|||
|
|
uni.downloadFile({
|
|||
|
|
url: item.content,
|
|||
|
|
header: {
|
|||
|
|
'Access-Control-Allow-Origin': '*',
|
|||
|
|
},
|
|||
|
|
success: (res) => {
|
|||
|
|
item.content = res.tempFilePath;
|
|||
|
|
if (item.arc) {
|
|||
|
|
this.drawImageArc(item);
|
|||
|
|
} else {
|
|||
|
|
this.drawImage(item);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
// console.log(res);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
// https图片下载本地并绘制，H5
|
|||
|
|
downloadImageH5 (item) {
|
|||
|
|
let image = null;
|
|||
|
|
image = new Image();
|
|||
|
|
image.setAttribute('crossOrigin', 'anonymous');
|
|||
|
|
image.crossOrigin = 'Anonymous';
|
|||
|
|
image.src = item.content;
|
|||
|
|
image.onload = () => {
|
|||
|
|
let canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = item.width;
|
|||
|
|
canvas.height = item.height;
|
|||
|
|
let ctx = canvas.getContext('2d');
|
|||
|
|
ctx.drawImage(
|
|||
|
|
image,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
item.width,
|
|||
|
|
item.height
|
|||
|
|
);
|
|||
|
|
let dataURL = canvas.toDataURL('image/png');
|
|||
|
|
if (item.arc) { // 绘制圆形
|
|||
|
|
item.content = dataURL;
|
|||
|
|
this.drawImageArc(item);
|
|||
|
|
} else {
|
|||
|
|
this.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;
|
|||
|
|
this.canvas.drawImage(
|
|||
|
|
dataURL,
|
|||
|
|
item.x,
|
|||
|
|
item.y,
|
|||
|
|
item.hasOwnProperty('width') ? item.width : this.width,
|
|||
|
|
item.hasOwnProperty('height') ? item.height : this.height
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
this.checkDrawOver();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
// #endif
|
|||
|
|
// 图片压缩
|
|||
|
|
compressImage (item) {
|
|||
|
|
// uni.showLoading({
|
|||
|
|
// title: '压缩中...',
|
|||
|
|
// mask: true
|
|||
|
|
// });
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '压缩中...',
|
|||
|
|
icon:'loading'
|
|||
|
|
})
|
|||
|
|
// 非H5压缩
|
|||
|
|
// #ifndef H5
|
|||
|
|
uni.compressImage({
|
|||
|
|
src: item.content,
|
|||
|
|
quality: this.compressQuality,
|
|||
|
|
success: (res) => {
|
|||
|
|
// uni.showLoading({
|
|||
|
|
// title: '正在生成图片...',
|
|||
|
|
// mask: true
|
|||
|
|
// });
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '正在生成图片...',
|
|||
|
|
icon:'loading'
|
|||
|
|
})
|
|||
|
|
item.content = res.tempFilePath;
|
|||
|
|
if (item.arc) {
|
|||
|
|
this.drawImageArc(item);
|
|||
|
|
} else {
|
|||
|
|
this.drawImage(item);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
// console.log(res);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '压缩失败',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
// H5压缩
|
|||
|
|
// #ifdef H5
|
|||
|
|
let image = new Image();
|
|||
|
|
image.setAttribute('crossOrigin', 'anonymous');
|
|||
|
|
image.crossOrigin = 'Anonymous';
|
|||
|
|
image.src = item.content;
|
|||
|
|
image.onload = () => {
|
|||
|
|
let canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = item.width;
|
|||
|
|
canvas.height = item.height;
|
|||
|
|
let ctx = canvas.getContext('2d');
|
|||
|
|
ctx.drawImage(
|
|||
|
|
image,
|
|||
|
|
0,
|
|||
|
|
0,
|
|||
|
|
item.width,
|
|||
|
|
item.height
|
|||
|
|
);
|
|||
|
|
let dataURL = canvas.toDataURL('image/png');
|
|||
|
|
item.content = dataURL;
|
|||
|
|
if (item.arc) {
|
|||
|
|
this.drawImageArc(item);
|
|||
|
|
} else {
|
|||
|
|
this.drawImage(item);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// 圆形图片另外绘制canvas,png格式
|
|||
|
|
drawImageArc (item) {
|
|||
|
|
this.canvasArc.clearRect(0, 0, this.canvasArcWidth, this.canvasArcHeight);
|
|||
|
|
this.canvasArcWidth = item.arcR * 2;
|
|||
|
|
this.canvasArcHeight = item.arcR * 2;
|
|||
|
|
this.canvasArc.save();
|
|||
|
|
let arcT = setTimeout(() => {
|
|||
|
|
clearTimeout(arcT);
|
|||
|
|
this.canvasArc.arc(item.arcR, item.arcR, item.arcR, 0, 2 * Math.PI);
|
|||
|
|
this.canvasArc.clip();
|
|||
|
|
// this.canvasArc.closePath();
|
|||
|
|
|
|||
|
|
this.canvasArc.drawImage(
|
|||
|
|
item.content,
|
|||
|
|
item.arcX,
|
|||
|
|
item.arcY,
|
|||
|
|
item.width,
|
|||
|
|
item.height
|
|||
|
|
);
|
|||
|
|
this.canvasArc.draw(false, setTimeout(() => {
|
|||
|
|
let t = setTimeout(() => {
|
|||
|
|
clearTimeout(t);
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
width: item.arcR * 2,
|
|||
|
|
height: item.arcR * 2,
|
|||
|
|
fileType: 'png',
|
|||
|
|
canvasId: 'canvas-arc',
|
|||
|
|
success: (res) => {
|
|||
|
|
item.width = item.arcR * 2;
|
|||
|
|
item.height = item.arcR * 2;
|
|||
|
|
item.content = res.tempFilePath;
|
|||
|
|
this.drawImage(item);
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
// console.log(res);
|
|||
|
|
},
|
|||
|
|
complete: () => {
|
|||
|
|
this.canvasArc.restore();
|
|||
|
|
this.canvasArc.fillRect(0, 0, 0, 0);
|
|||
|
|
this.canvasArc.clearRect(0, 0, this.canvasArcWidth, this.canvasArcHeight);
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}, 100);
|
|||
|
|
}));
|
|||
|
|
}, 100);
|
|||
|
|
},
|
|||
|
|
// 图片绘制
|
|||
|
|
drawImage (item) {
|
|||
|
|
this.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;
|
|||
|
|
this.canvas.drawImage(
|
|||
|
|
item.content,
|
|||
|
|
item.x,
|
|||
|
|
item.y,
|
|||
|
|
item.hasOwnProperty('width') ? item.width : this.width,
|
|||
|
|
item.hasOwnProperty('height') ? item.height : this.height
|
|||
|
|
);
|
|||
|
|
this.checkDrawOver();
|
|||
|
|
},
|
|||
|
|
// 文本绘制
|
|||
|
|
drawText (item) {
|
|||
|
|
this.canvas.setFillStyle(item.hasOwnProperty('color') ? item.color : '#000000');
|
|||
|
|
this.canvas.setFontSize(item.hasOwnProperty('size')? item.size : 20);
|
|||
|
|
this.canvas.setTextAlign(item.hasOwnProperty('align') ? item.align: 'left');
|
|||
|
|
this.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;
|
|||
|
|
|
|||
|
|
if (item.maxWidth) {
|
|||
|
|
this.canvas.fillText(item.content, item.x, item.y, item.maxWidth);
|
|||
|
|
} else {
|
|||
|
|
this.canvas.fillText(item.content, item.x, item.y);
|
|||
|
|
}
|
|||
|
|
this.checkDrawOver();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 矩形（线条）绘制
|
|||
|
|
drawRect (item) {
|
|||
|
|
this.canvas.setFillStyle(item.hasOwnProperty('color') ? item.color : '#000000');
|
|||
|
|
this.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;
|
|||
|
|
this.canvas.fillRect(item.x, item.y, item.width, item.height);
|
|||
|
|
this.checkDrawOver();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 圆形绘制
|
|||
|
|
drawArc (item) {
|
|||
|
|
this.canvas.arc(item.arcX, item.arcY, item.arcR, 0, 2 * Math.PI);
|
|||
|
|
this.canvas.setFillStyle(item.hasOwnProperty('color') ? item.color : '#000000');
|
|||
|
|
this.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;
|
|||
|
|
this.canvas.fill();
|
|||
|
|
this.canvas.closePath();
|
|||
|
|
this.checkDrawOver();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 二维码绘制
|
|||
|
|
drawQR (item) {
|
|||
|
|
item['qr'] = QR.createQrCodeImg(item.content, {
|
|||
|
|
size: parseInt(300)
|
|||
|
|
});
|
|||
|
|
this.canvas.globalAlpha = item.hasOwnProperty('globalAlpha') ? item.globalAlpha : 1;
|
|||
|
|
this.canvas.drawImage(
|
|||
|
|
item.qr,
|
|||
|
|
item.x,
|
|||
|
|
item.y,
|
|||
|
|
item.hasOwnProperty('width') ? item.width : this.width,
|
|||
|
|
item.hasOwnProperty('height') ? item.height : this.height
|
|||
|
|
);
|
|||
|
|
this.checkDrawOver();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 判断是否绘制完
|
|||
|
|
checkDrawOver () {
|
|||
|
|
if (this.listsIndex < this.listsLength) { // lists未画完
|
|||
|
|
this.listsIndex++;
|
|||
|
|
this.dataDrawCanvas();
|
|||
|
|
} else {
|
|||
|
|
this.canvasImage();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 绘制到画布并生成图片
|
|||
|
|
canvasImage () {
|
|||
|
|
this.listsIndex = 0;
|
|||
|
|
this.canvas.draw(false, setTimeout(() => {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.canvasToTempFilePath({
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
width: Number(this.width),
|
|||
|
|
height: Number(this.height),
|
|||
|
|
fileType: this.imgType,
|
|||
|
|
canvasId: 'canvas',
|
|||
|
|
success: (res) => {
|
|||
|
|
this.$emit('canvasImage', res.tempFilePath);
|
|||
|
|
if (this.showPreview) {
|
|||
|
|
this.showPreviewFn(res.tempFilePath);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: (res) => {
|
|||
|
|
// console.log(res);
|
|||
|
|
},
|
|||
|
|
complete: () => {
|
|||
|
|
// uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
}, this);
|
|||
|
|
}, 500);
|
|||
|
|
}));
|
|||
|
|
},
|
|||
|
|
// 预览图
|
|||
|
|
showPreviewFn (img) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
current: 0,
|
|||
|
|
urls: [img]
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 清空画布
|
|||
|
|
clearCanvas () {
|
|||
|
|
this.canvas.clearRect(0, 0, this.width, this.height);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang='scss' scoped>
|
|||
|
|
.mosowe-canvas-image{
|
|||
|
|
overflow: hidden;
|
|||
|
|
.canvas-wrap-box{
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
position: fixed;
|
|||
|
|
left:200%;
|
|||
|
|
top: 0;
|
|||
|
|
}
|
|||
|
|
.canvas-wrap {
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: 0;
|
|||
|
|
width: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|