Skip to content

H
hs-app-project
Commit 9026175e authored by Zheng Shang Jun's avatar Zheng Shang Jun
Browse files
Options

修改小bug

parent fe440f6e
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 157 deletions
src/pages/index/canvas.js
View file @ 9026175e
// import mergeImages from "./mergeImages"; // import mergeImages from "./mergeImages";
export default { export default {
data(){ data() {
return { return {
system_info:{}, //system info system_info: {}, //system info
canvas_width:0, //canvas width px canvas_width: 0, //canvas width px
canvas_height:0, //canvas height px canvas_height: 0, //canvas height px
ctx:null, //canvas object ctx: null, //canvas object
canvas_id:null, //canvas id canvas_id: null, //canvas id
hidden:false, //Whether to hide canvas hidden: false, //Whether to hide canvas
scale:1, //canvas scale scale: 1, //canvas scale
r_canvas_scale:1, r_canvas_scale: 1,
if_ctx:true if_ctx: true
} }
}, },
methods:{ methods: {
/** /**
* Compatibility px * Compatibility px
* @param {Object} size * @param {Object} size
...@@ -31,9 +31,9 @@ export default { ...@@ -31,9 +31,9 @@ export default {
resetCompatibilitySize(size) { resetCompatibilitySize(size) {
return (parseFloat(size / 2) / this.system_info.windowWidth) * 750 return (parseFloat(size / 2) / this.system_info.windowWidth) * 750
}, },
init(config){ init(config) {
return new Promise(async (resolve,reject)=>{ return new Promise(async (resolve, reject) => {
if(!config.canvas_id){ if (!config.canvas_id) {
reject("Canvas ID cannot be empty, please refer to the usage example") reject("Canvas ID cannot be empty, please refer to the usage example")
return; return;
} }
...@@ -41,149 +41,130 @@ export default { ...@@ -41,149 +41,130 @@ export default {
this.canvas_id = config.canvas_id this.canvas_id = config.canvas_id
let system_info = await uni.getSystemInfoSync() let system_info = await uni.getSystemInfoSync()
this.system_info = system_info this.system_info = system_info
this.scale = config.scale && parseFloat(config.scale)>0?parseInt(config.scale):1 this.scale = config.scale && parseFloat(config.scale) > 0 ? parseInt(config.scale) : 1
this.canvas_width = (config.canvas_width ? this.compatibilitySize(config.canvas_width) : system_info.windowWidth) * this.scale this.canvas_width = (config.canvas_width ? this.compatibilitySize(config.canvas_width) : system_info.windowWidth) * this.scale
this.canvas_height = (config.canvas_height ? this.compatibilitySize(config.canvas_height) : system_info.windowHeight) * this.scale, this.canvas_height = (config.canvas_height ? this.compatibilitySize(config.canvas_height) : system_info.windowHeight) * this.scale,
this.r_canvas_scale = 1/this.scale this.r_canvas_scale = 1 / this.scale
this.ctx = uni.createCanvasContext(this.canvas_id,this) this.ctx = uni.createCanvasContext(this.canvas_id, this)
resolve() resolve()
}) })
}, },
draw(callback){ draw(callback) {
return new Promise((resolve,reject)=>{ return new Promise((resolve, reject) => {
let stop = setTimeout(()=>{ let stop = setTimeout(() => {
this.ctx.draw(false,setTimeout(()=>{ this.ctx.draw(false, setTimeout(() => {
uni.canvasToTempFilePath({ uni.canvasToTempFilePath({
canvasId: this.canvas_id, canvasId: this.canvas_id,
quality: 1, quality: 1,
success: (res)=>{ success: (res) => {
// console.log("--draw--"+ this.canvas_id) // console.log("--draw--"+ this.canvas_id)
resolve(res) resolve(res)
callback && callback(res) callback && callback(res)
}, },
fail:(err)=>{ fail: (err) => {
reject(JSON.stringify(err)|| "Failed to generate poster:101") reject(JSON.stringify(err) || "Failed to generate poster:101")
} }
},this) }, this)
},300)) }, 300))
clearTimeout(stop) clearTimeout(stop)
},300) }, 300)
}) })
}, },
clearCanvas(callback){ clearCanvas(callback) {
return new Promise(async (resolve,reject)=>{ return new Promise(async (resolve, reject) => {
if(!this.ctx){ if (!this.ctx) {
reject("canvas is not initialized:101") reject("canvas is not initialized:101")
return return
}else{ } else {
this.ctx.clearRect(0,0, this.ctx.clearRect(0, 0,
parseFloat(this.canvas_width)*this.scale, parseFloat(this.canvas_width) * this.scale,
parseFloat(this.canvas_height)*this.scale parseFloat(this.canvas_height) * this.scale
) )
this.ctx.draw(false,callback) this.ctx.draw(false, callback)
resolve() resolve()
} }
}) })
}, },
readFile(url){ readFile(url) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(url,(obj)=>{ plus.io.resolveLocalFileSystemURL(url, (obj) => {
obj.file((file)=>{ obj.file((file) => {
let fileReader = new plus.io.FileReader() let fileReader = new plus.io.FileReader()
fileReader.onload = (res)=>{ fileReader.onload = (res) => {
resolve(res.target.result) resolve(res.target.result)
} }
fileReader.onerror = (err)=>{ fileReader.onerror = (err) => {
reject(err) reject(err)
} }
fileReader.readAsDataURL(file) fileReader.readAsDataURL(file)
}, (err)=>{ }, (err) => {
reject(err) reject(err)
}) })
},(err)=>{ }, (err) => {
reject(err) reject(err)
}) })
}) })
}, },
// 下载图片资源 // 下载图片资源
downLoadNetworkFile(url){ downLoadNetworkFile(url) {
// #ifdef APP-PLUS // #ifdef APP-PLUS
if(url.indexOf('http') > -1){ if (url.indexOf('http') > -1) {
return new Promise((resolve,reject)=>{ return new Promise((resolve, reject) => {
uni.downloadFile({ uni.downloadFile({
url, url,
success:(res)=>{ success: (res) => {
// console.log(res.tempFilePath) // console.log(res.tempFilePath)
if(res.statusCode == 200){ if (res.statusCode == 200) {
resolve(res.tempFilePath) resolve(res.tempFilePath)
}else{ } else {
reject("Download Image Fail:102") reject("Download Image Fail:102")
} }
}, },
fail:(err)=>{ fail: (err) => {
reject("Download Image Fail:101") reject("Download Image Fail:101")
} }
}) })
}) })
}else{ } else {
return this.readFile(url); return this.readFile(url);
} }
// #endif // #endif
// #ifdef H5
return new Promise((resolve,reject)=>{
uni.downloadFile({
url,
success:(res)=>{
// console.log(res.tempFilePath)
if(res.statusCode == 200){
resolve(res.tempFilePath)
}else{
reject("Download Image Fail:102")
}
},
fail:(err)=>{
reject("Download Image Fail:101")
}
})
})
// #endif
}, },
urlToBase64(config){ urlToBase64(config) {
return new Promise(async (resolve,reject)=>{ return new Promise(async (resolve, reject) => {
if (typeof window != 'undefined') { if (typeof window != 'undefined') {
await this.downLoadNetworkFile(config.url).then(res=>{ // two function await this.downLoadNetworkFile(config.url).then(res => { // two function
resolve(res) resolve(res)
}).catch(err=>{ }).catch(err => {
reject(err) reject(err)
}) })
}else if (typeof plus != 'undefined') { } else if (typeof plus != 'undefined') {
plus.io.resolveLocalFileSystemURL(config.url,(obj)=>{ plus.io.resolveLocalFileSystemURL(config.url, (obj) => {
obj.file((file)=>{ obj.file((file) => {
let fileReader = new plus.io.FileReader() let fileReader = new plus.io.FileReader()
fileReader.onload = (res)=>{ fileReader.onload = (res) => {
resolve(res.target.result) resolve(res.target.result)
} }
fileReader.onerror = (err)=>{ fileReader.onerror = (err) => {
reject(err) reject(err)
} }
fileReader.readAsDataURL(file) fileReader.readAsDataURL(file)
}, (err)=>{ }, (err) => {
reject(err) reject(err)
}) })
},(err)=>{ }, (err) => {
reject(err) reject(err)
}) })
}else if(typeof wx != 'undefined'){ } else if (typeof wx != 'undefined') {
wx.getFileSystemManager().readFile({ wx.getFileSystemManager().readFile({
filePath: config.url, filePath: config.url,
encoding: 'base64', encoding: 'base64',
success: function(res) { success: function (res) {
resolve('data:image/png;base64,' + res.data) resolve('data:image/png;base64,' + res.data)
}, },
fail: function(error) { fail: function (error) {
reject(error) reject(error)
} }
}) })
...@@ -192,7 +173,7 @@ export default { ...@@ -192,7 +173,7 @@ export default {
}, },
mergeImageByColor(image,color,borderWidth = 0){ mergeImageByColor(image, color, borderWidth = 0) {
let ctx = this.ctx; let ctx = this.ctx;
const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
// 平移图像 // 平移图像
...@@ -202,14 +183,14 @@ export default { ...@@ -202,14 +183,14 @@ export default {
ctx.globalCompositeOperation = "source-in"; ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = color; ctx.fillStyle = color;
ctx.globalAlpha = 1; ctx.globalAlpha = 1;
ctx.fillRect(0, 0, this.canvas_width,this.canvas_height); ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
// 添加原图 // 添加原图
ctx.globalCompositeOperation = "source-atop"; ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(image, 0, 0); ctx.drawImage(image, 0, 0);
ctx.draw(); ctx.draw();
}, },
async mergeImageByImg(item,target){ async mergeImageByImg(item, target) {
let ctx = this.ctx; let ctx = this.ctx;
ctx.globalCompositeOperation = "source-over"; ctx.globalCompositeOperation = "source-over";
let fileList = [ let fileList = [
...@@ -217,100 +198,100 @@ export default { ...@@ -217,100 +198,100 @@ export default {
await this.downLoadNetworkFile(target), await this.downLoadNetworkFile(target),
] ]
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
resolve( resolve(
Promise.all(fileList) Promise.all(fileList)
.then((images) =>{ .then((images) => {
const borderWidth = 0; const borderWidth = 0;
const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array const dArr = [-1, -1, 0, -1, 1, -1, -1, 0, 1, 0, -1, 1, 0, 1, 1, 1]; // offset array
// 平移图像 // 平移图像
for (let i = 0; i < dArr.length; i += 4) for (let i = 0; i < dArr.length; i += 4)
ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height); ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth, this.canvas_width, this.canvas_height);
// 填充描边色 // 填充描边色
ctx.globalCompositeOperation = "source-in"; ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, this.canvas_width, this.canvas_height); ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
// // 添加原图 // // 添加原图
ctx.globalCompositeOperation = "source-atop"; ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(images[1], 0, 0,this.canvas_width, this.canvas_height); ctx.drawImage(images[1], 0, 0, this.canvas_width, this.canvas_height);
ctx.draw(); ctx.draw();
}) })
) )
}) })
}, },
mergeImages(sources = []){ mergeImages(sources = []) {
return new Promise((resolve,reject) =>{ return new Promise((resolve, reject) => {
// Load sources // Load sources
let fileList = sources.map((source) => { let fileList = sources.map((source) => {
return this.downLoadNetworkFile(source); return this.downLoadNetworkFile(source);
}); });
resolve( resolve(
Promise.all(fileList) Promise.all(fileList)
.then((images) =>{ .then((images) => {
console.log(images) console.log(images)
// Draw images to canvas // Draw images to canvas
images.forEach((image) => { images.forEach((image) => {
this.ctx.globalAlpha = image.opacity ? image.opacity : 1; this.ctx.globalAlpha = image.opacity ? image.opacity : 1;
return this.ctx.drawImage(image, 0, 0); return this.ctx.drawImage(image, 0, 0);
}); });
this.ctx.draw(); this.ctx.draw();
}) })
) )
}) })
}, },
scaleImage(){ scaleImage() {
let config = { let config = {
}; };
return { return {
width: this.compatibilitySize(parseFloat(config.w)*this.scale), width: this.compatibilitySize(parseFloat(config.w) * this.scale),
height: this.compatibilitySize(parseFloat(config.h)*this.scale)) height: this.compatibilitySize(parseFloat(config.h) * this.scale)
} }
}, },
drawImage(config){ drawImage(config) {
return new Promise(async (resolve,reject)=>{ return new Promise(async (resolve, reject) => {
if(config.url){ if (config.url) {
let type = 0 // 1、network image 2、native image 3、base64 image let type = 0 // 1、network image 2、native image 3、base64 image
let image_url let image_url
let reg = /^https?/ig; let reg = /^https?/ig;
if(reg.test(config.url)){ if (reg.test(config.url)) {
type = 1 type = 1
}else{ } else {
if((config.url.indexOf("data:image/png;base64") != -1) || config.url.indexOf("data:image/jpeg;base64") != -1){ if ((config.url.indexOf("data:image/png;base64") != -1) || config.url.indexOf("data:image/jpeg;base64") != -1) {
type = 3 type = 3
}else{ } else {
type = 2 type = 2
} }
} }
if(type == 1){ if (type == 1) {
// network image // network image
await this.downLoadNetworkFile(config.url).then(res=>{ // two function await this.downLoadNetworkFile(config.url).then(res => { // two function
image_url = res image_url = res
}).catch(err=>{ }).catch(err => {
reject(err) reject(err)
return; return;
}) })
}else if(type == 2){ } else if (type == 2) {
// native image // native image
const imageInfoResult = await uni.getImageInfo({ const imageInfoResult = await uni.getImageInfo({
src: config.url src: config.url
}); });
try{ try {
if(imageInfoResult.length <= 1){ if (imageInfoResult.length <= 1) {
reject(imageInfoResult[0].errMsg + ':404') reject(imageInfoResult[0].errMsg + ':404')
return return
} }
}catch(e){ } catch (e) {
reject(e+':500') reject(e + ':500')
return return
} }
let base64 = await this.urlToBase64({url:imageInfoResult[1].path}) let base64 = await this.urlToBase64({ url: imageInfoResult[1].path })
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
await this.base64ToNative({url:base64}).then(res=>{ await this.base64ToNative({ url: base64 }).then(res => {
image_url = res image_url = res
}).catch(err=>{ }).catch(err => {
reject(JSON.stringify(err)+":501") reject(JSON.stringify(err) + ":501")
return; return;
}) })
// #endif // #endif
...@@ -318,81 +299,81 @@ export default { ...@@ -318,81 +299,81 @@ export default {
image_url = base64 image_url = base64
// #endif // #endif
}else if(type == 3){ } else if (type == 3) {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
await this.base64ToNative({url:config.url}).then(res=>{ await this.base64ToNative({ url: config.url }).then(res => {
image_url = res image_url = res
}).catch(err=>{ }).catch(err => {
reject(JSON.stringify(err)+":500") reject(JSON.stringify(err) + ":500")
return; return;
}) })
// #endif // #endif
// #ifndef MP-WEIXIN // #ifndef MP-WEIXIN
image_url = config.url image_url = config.url
// #endif // #endif
}else{ } else {
reject("Other Type Errors:101") reject("Other Type Errors:101")
return return
} }
if(config.border_width){ if (config.border_width) {
let border_radius = 0 let border_radius = 0
if(config.border_radius){ if (config.border_radius) {
let multiple = config.w / config.border_radius let multiple = config.w / config.border_radius
border_radius = (parseFloat(config.w) + parseFloat(config.border_width)) / multiple border_radius = (parseFloat(config.w) + parseFloat(config.border_width)) / multiple
} }
// drawRect // drawRect
await this.drawRect({ await this.drawRect({
x:parseFloat(config.x) - parseFloat(config.border_width)/2, x: parseFloat(config.x) - parseFloat(config.border_width) / 2,
y:parseFloat(config.y) - parseFloat(config.border_width)/2, y: parseFloat(config.y) - parseFloat(config.border_width) / 2,
w:parseFloat(config.w) + parseFloat(config.border_width), w: parseFloat(config.w) + parseFloat(config.border_width),
h:parseFloat(config.h) + parseFloat(config.border_width), h: parseFloat(config.h) + parseFloat(config.border_width),
color:config.border_color, color: config.border_color,
border_radius:border_radius, border_radius: border_radius,
border_width:config.border_width, border_width: config.border_width,
is_radius:config.is_radius is_radius: config.is_radius
}) })
} }
if(config.border_radius){ if (config.border_radius) {
this.setNativeBorderRadius(config) this.setNativeBorderRadius(config)
}else if(config.is_radius){ } else if (config.is_radius) {
//已废弃 is_radius //已废弃 is_radius
this.ctx.setStrokeStyle("rgba(0,0,0,0)") this.ctx.setStrokeStyle("rgba(0,0,0,0)")
this.ctx.save() this.ctx.save()
this.ctx.beginPath() this.ctx.beginPath()
this.ctx.arc(this.compatibilitySize(parseFloat(config.x)*this.scale+parseFloat(config.w)*this.scale/2), this.compatibilitySize(parseFloat(config.y)*this.scale+parseFloat(config.h)*this.scale/2), this.compatibilitySize(parseFloat(config.w)*this.scale/2), 0, 2 * Math.PI, false) this.ctx.arc(this.compatibilitySize(parseFloat(config.x) * this.scale + parseFloat(config.w) * this.scale / 2), this.compatibilitySize(parseFloat(config.y) * this.scale + parseFloat(config.h) * this.scale / 2), this.compatibilitySize(parseFloat(config.w) * this.scale / 2), 0, 2 * Math.PI, false)
this.ctx.stroke(); this.ctx.stroke();
this.ctx.clip() this.ctx.clip()
} }
await this.ctx.drawImage(image_url,this.compatibilitySize(parseFloat(config.x)*this.scale),this.compatibilitySize(parseFloat(config.y)*this.scale),this.compatibilitySize(parseFloat(config.w)*this.scale),this.compatibilitySize(parseFloat(config.h)*this.scale)) await this.ctx.drawImage(image_url, this.compatibilitySize(parseFloat(config.x) * this.scale), this.compatibilitySize(parseFloat(config.y) * this.scale), this.compatibilitySize(parseFloat(config.w) * this.scale), this.compatibilitySize(parseFloat(config.h) * this.scale))
this.ctx.restore() //Restore previously saved drawing context this.ctx.restore() //Restore previously saved drawing context
resolve() resolve()
}else{ } else {
let err_msg = "Links cannot be empty:101" let err_msg = "Links cannot be empty:101"
reject(err_msg) reject(err_msg)
} }
}) })
}, },
exportImg(){ exportImg() {
return new Promise((resolve,reject) => { return new Promise((resolve, reject) => {
setTimeout(() =>{ setTimeout(() => {
uni.canvasToTempFilePath({ uni.canvasToTempFilePath({
canvasId: this.canvas_id, canvasId: this.canvas_id,
quality: 1, quality: 1,
success: (res)=>{ success: (res) => {
// console.log('res',res.tempFilePath) // console.log('res',res.tempFilePath)
resolve(res.tempFilePath) resolve(res.tempFilePath)
}, },
fail:(err)=>{ fail: (err) => {
reject(JSON.stringify(err)|| "Failed to generate poster:101") reject(JSON.stringify(err) || "Failed to generate poster:101")
} }
},this) }, this)
},1200) }, 1200)
}) })
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment