画布改大备份
This commit is contained in:
老叶
@@ -1,4 +1,4 @@
|
||||
const env = "p";
|
||||
const env = "d";
|
||||
|
||||
const version = 1,
|
||||
|
||||
|
||||
@@ -0,0 +1,277 @@
|
||||
import _ from '../../commons/js/commons'
|
||||
import Canvas from '../../commons/js/utils/canvas'
|
||||
let isGetImgInfo = false
|
||||
const app = getApp()
|
||||
Component({
|
||||
//组件的属性列表
|
||||
properties: {
|
||||
source: {
|
||||
type: String,
|
||||
value: 'goods'
|
||||
},
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
isCreateQrcode: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
qccodeid: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
customImg: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
slogan: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
moments: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
},
|
||||
|
||||
//组件的初始数据
|
||||
data: {
|
||||
//headImg:app.getStorageByKey("userInfo").headimg,
|
||||
defaultQrcode: _.config.imgUrl + 'common/qr.jpg',
|
||||
imgs: [],
|
||||
tempPosterPath: '',
|
||||
showOptBtn:false,//操作按钮显示
|
||||
},
|
||||
|
||||
attached: function () {
|
||||
isGetImgInfo = false
|
||||
},
|
||||
|
||||
//数据监听
|
||||
observers: {
|
||||
'isCreateQrcode': function (e) {
|
||||
if (e) {
|
||||
this.getMaterialHomeQrcode()
|
||||
}
|
||||
},
|
||||
'isShow': function (e) {
|
||||
if (e) {
|
||||
this.setData({
|
||||
showOptBtn:false,
|
||||
})
|
||||
this.createPoster()
|
||||
}
|
||||
},
|
||||
'customImg': function (e) {
|
||||
if (e) {
|
||||
// this.setData({
|
||||
// headImg:app.getStorageByKey("userInfo").headimg,
|
||||
// })
|
||||
//头像
|
||||
//this.getImageInfo(this.data.headImg, 4)
|
||||
this.getImageInfo(this.data.customImg, 3)
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
//组件的方法列表
|
||||
methods: {
|
||||
|
||||
// 转化网络图片，获取路径
|
||||
getImageInfo(src, index) {
|
||||
let that = this
|
||||
isGetImgInfo = false
|
||||
setTimeout(function () {
|
||||
wx.getImageInfo({
|
||||
src: src,
|
||||
success: (res) => {
|
||||
let arr = that.data.imgs
|
||||
arr[index] = res
|
||||
that.setData({
|
||||
imgs: arr
|
||||
})
|
||||
isGetImgInfo = true
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('error img is: ' + src)
|
||||
}
|
||||
})
|
||||
}, 200)
|
||||
},
|
||||
|
||||
//获取二维码
|
||||
getMaterialHomeQrcode() {
|
||||
let params = {};
|
||||
params['page'] = 'pages/special2/index';
|
||||
params['scene'] = this.data.qccodeid+'_'+app.getStorageByKey("userInfo").biz_id;
|
||||
params['width'] = 1280;
|
||||
_.apiQuery.getMaterialHomeQrcode(params).then(res => {
|
||||
this.getImageInfo(res.data.url, 2)
|
||||
}).catch(res => {
|
||||
//this.getImageInfo(this.data.defaultQrcode, 2)
|
||||
})
|
||||
},
|
||||
|
||||
//自定义海报
|
||||
customizePoster(CTX){
|
||||
|
||||
if(this.data.customImg){
|
||||
let that = this
|
||||
this.setData({
|
||||
canvasInfo:{
|
||||
width: parseFloat(this.data.imgs[3].width)+'px',
|
||||
height: parseFloat(this.data.imgs[3].height)+'px'
|
||||
}
|
||||
})
|
||||
|
||||
console.log(this.data.imgs[3].width)
|
||||
console.log(this.data.imgs[3].height)
|
||||
|
||||
//背景
|
||||
if (that.data.imgs[3]) {
|
||||
CTX.drawImage(that.data.imgs[3].path, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height)
|
||||
}
|
||||
|
||||
// //头像
|
||||
// if (that.data.imgs[4]) {
|
||||
// Canvas.circleImage(CTX,that.data.imgs[4].path,20, (that.data.imgs[3].height-170)/2,22/2)
|
||||
// }
|
||||
|
||||
// //昵称
|
||||
// Canvas.drawTextOverflow(CTX, app.getStorageByKey("userInfo").nickname, 150, 1, 14, '#fff', 20, 46, (that.data.imgs[3].height-132)/2)
|
||||
|
||||
// //标语
|
||||
// if (that.data.slogan) {
|
||||
// Canvas.drawTextOverflow(CTX, that.data.slogan, 200, 2, 11, '#fff', 17, 20, (that.data.imgs[3].height-85)/2)
|
||||
// }
|
||||
|
||||
// //标语
|
||||
// if (that.data.slogan) {
|
||||
// Canvas.drawTextOverflow(CTX, that.data.slogan, 180, 2, 11, '#666', 17, 20, (that.data.imgs[3].height-100)/2)
|
||||
// }
|
||||
|
||||
//二维码
|
||||
if (that.data.imgs[2]) {
|
||||
if(this.data.imgs[3].width>this.data.imgs[3].height){
|
||||
Canvas.circleImage(CTX,that.data.imgs[2].path,parseFloat(this.data.imgs[3].width)-parseFloat(this.data.imgs[3].height/5.5)-30, parseFloat(this.data.imgs[3].height)-parseFloat(this.data.imgs[3].height/5.5)-30,parseFloat(this.data.imgs[3].height/11))
|
||||
}else{
|
||||
Canvas.circleImage(CTX,that.data.imgs[2].path,parseFloat(this.data.imgs[3].width)-parseFloat(this.data.imgs[3].width/5.5)-30, parseFloat(this.data.imgs[3].height)-parseFloat(this.data.imgs[3].width/5.5)-30,parseFloat(this.data.imgs[3].width/11))
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(function(){
|
||||
CTX.save()
|
||||
CTX.draw(true, function () {
|
||||
wx.hideLoading()
|
||||
that.saveCanvas()
|
||||
})
|
||||
},200)
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//生成海报
|
||||
createPoster() {
|
||||
let that = this
|
||||
wx.showLoading({
|
||||
title: '正在生成',
|
||||
})
|
||||
|
||||
if(isGetImgInfo){
|
||||
this.setData({
|
||||
tempPosterPath: ''
|
||||
})
|
||||
let ctx = wx.createCanvasContext('postercanvas', that)
|
||||
that.customizePoster(ctx)
|
||||
}
|
||||
},
|
||||
|
||||
//临时存储canvas
|
||||
saveCanvas() {
|
||||
let that = this
|
||||
wx.canvasToTempFilePath({
|
||||
canvasId: 'postercanvas',
|
||||
quality: 1,
|
||||
success: (res) => {
|
||||
// this.tempFilePath = res.tempFilePath
|
||||
that.setData({
|
||||
'tempPosterPath': res.tempFilePath
|
||||
})
|
||||
|
||||
setTimeout(function () {
|
||||
that.setData({
|
||||
showOptBtn:true,
|
||||
})
|
||||
},200)
|
||||
|
||||
},
|
||||
fail: (res) => {
|
||||
app.printErrorClient('poseterfail',['错误信息：临时存储canvas失败',JSON.stringify(res)])
|
||||
}
|
||||
}, this)
|
||||
},
|
||||
|
||||
//保存到相册
|
||||
saveToAblum() {
|
||||
let that = this
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: this.data.tempPosterPath,
|
||||
success: (res) => {
|
||||
_.utils.$toast('保存成功')
|
||||
},
|
||||
fail: (err) => {
|
||||
app.printErrorClient('poseterfail',['错误信息：图片保存失败',JSON.stringify(err)])
|
||||
if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
|
||||
_.utils.$toast('您已取消保存')
|
||||
} else if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
|
||||
_.utils.$modal('提示', '保存图片失败，您可以点击确定设置获取相册权限后再尝试保存！', '去授权').then(res => {
|
||||
if (res) {
|
||||
wx.openSetting({}) // 打开小程序设置页面，可以设置权限
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//隐藏海报弹框
|
||||
hidePoster() {
|
||||
this.setData({
|
||||
isShow: false
|
||||
})
|
||||
wx.hideLoading()
|
||||
},
|
||||
|
||||
//预览图片
|
||||
preview() {
|
||||
wx.previewImage({
|
||||
current: this.data.tempPosterPath, // 当前显示图片的http链接
|
||||
urls: [this.data.tempPosterPath] // 需要预览的图片http链接列表
|
||||
})
|
||||
},
|
||||
|
||||
//推送链接
|
||||
pushLink(e) {
|
||||
if(e.currentTarget.dataset.url){
|
||||
_.$router.openUrlScheme(e.currentTarget.dataset.url)
|
||||
}
|
||||
},
|
||||
|
||||
//复制内容
|
||||
copyWord(e){
|
||||
if(e.currentTarget.dataset.tx){
|
||||
wx.setClipboardData({
|
||||
data: e.currentTarget.dataset.tx,
|
||||
success (res) {
|
||||
_.utils.$toast('复制成功')
|
||||
}
|
||||
})
|
||||
}else{
|
||||
_.utils.$toast('目前无文案')
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user