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";
export default {
data(){
data() {
return {
system_info:{}, //system info
canvas_width:0, //canvas width px
canvas_height:0, //canvas height px
ctx:null, //canvas object
canvas_id:null, //canvas id
hidden:false, //Whether to hide canvas
scale:1, //canvas scale
r_canvas_scale:1,
if_ctx:true
system_info: {}, //system info
canvas_width: 0, //canvas width px
canvas_height: 0, //canvas height px
ctx: null, //canvas object
canvas_id: null, //canvas id
hidden: false, //Whether to hide canvas
scale: 1, //canvas scale
r_canvas_scale: 1,
if_ctx: true
}
},
methods:{
methods: {
/**
* Compatibility px
* @param {Object} size
......@@ -31,9 +31,9 @@ export default {
resetCompatibilitySize(size) {
return (parseFloat(size / 2) / this.system_info.windowWidth) * 750
},
init(config){
return new Promise(async (resolve,reject)=>{
if(!config.canvas_id){
init(config) {
return new Promise(async (resolve, reject) => {
if (!config.canvas_id) {
reject("Canvas ID cannot be empty, please refer to the usage example")
return;
}
......@@ -41,149 +41,130 @@ export default {
this.canvas_id = config.canvas_id
let system_info = await uni.getSystemInfoSync()
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_height = (config.canvas_height ? this.compatibilitySize(config.canvas_height) : system_info.windowHeight) * this.scale,
this.r_canvas_scale = 1/this.scale
this.ctx = uni.createCanvasContext(this.canvas_id,this)
this.r_canvas_scale = 1 / this.scale
this.ctx = uni.createCanvasContext(this.canvas_id, this)
resolve()
})
},
draw(callback){
return new Promise((resolve,reject)=>{
let stop = setTimeout(()=>{
this.ctx.draw(false,setTimeout(()=>{
draw(callback) {
return new Promise((resolve, reject) => {
let stop = setTimeout(() => {
this.ctx.draw(false, setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: this.canvas_id,
quality: 1,
success: (res)=>{
success: (res) => {
// console.log("--draw--"+ this.canvas_id)
resolve(res)
callback && callback(res)
},
fail:(err)=>{
reject(JSON.stringify(err)|| "Failed to generate poster:101")
fail: (err) => {
reject(JSON.stringify(err) || "Failed to generate poster:101")
}
},this)
},300))
}, this)
}, 300))
clearTimeout(stop)
},300)
}, 300)
})
},
clearCanvas(callback){
return new Promise(async (resolve,reject)=>{
if(!this.ctx){
clearCanvas(callback) {
return new Promise(async (resolve, reject) => {
if (!this.ctx) {
reject("canvas is not initialized:101")
return
}else{
this.ctx.clearRect(0,0,
parseFloat(this.canvas_width)*this.scale,
parseFloat(this.canvas_height)*this.scale
} else {
this.ctx.clearRect(0, 0,
parseFloat(this.canvas_width) * this.scale,
parseFloat(this.canvas_height) * this.scale
)
this.ctx.draw(false,callback)
this.ctx.draw(false, callback)
resolve()
}
})
},
readFile(url){
readFile(url) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(url,(obj)=>{
obj.file((file)=>{
plus.io.resolveLocalFileSystemURL(url, (obj) => {
obj.file((file) => {
let fileReader = new plus.io.FileReader()
fileReader.onload = (res)=>{
fileReader.onload = (res) => {
resolve(res.target.result)
}
fileReader.onerror = (err)=>{
fileReader.onerror = (err) => {
reject(err)
}
fileReader.readAsDataURL(file)
}, (err)=>{
}, (err) => {
reject(err)
})
},(err)=>{
}, (err) => {
reject(err)
})
})
},
// 下载图片资源
downLoadNetworkFile(url){
downLoadNetworkFile(url) {
// #ifdef APP-PLUS
if(url.indexOf('http') > -1){
return new Promise((resolve,reject)=>{
if (url.indexOf('http') > -1) {
return new Promise((resolve, reject) => {
uni.downloadFile({
url,
success:(res)=>{
success: (res) => {
// console.log(res.tempFilePath)
if(res.statusCode == 200){
if (res.statusCode == 200) {
resolve(res.tempFilePath)
}else{
} else {
reject("Download Image Fail:102")
}
},
fail:(err)=>{
fail: (err) => {
reject("Download Image Fail:101")
}
})
})
}else{
} else {
return this.readFile(url);
}
// #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){
return new Promise(async (resolve,reject)=>{
urlToBase64(config) {
return new Promise(async (resolve, reject) => {
if (typeof window != 'undefined') {
await this.downLoadNetworkFile(config.url).then(res=>{ // two function
await this.downLoadNetworkFile(config.url).then(res => { // two function
resolve(res)
}).catch(err=>{
}).catch(err => {
reject(err)
})
}else if (typeof plus != 'undefined') {
plus.io.resolveLocalFileSystemURL(config.url,(obj)=>{
obj.file((file)=>{
} else if (typeof plus != 'undefined') {
plus.io.resolveLocalFileSystemURL(config.url, (obj) => {
obj.file((file) => {
let fileReader = new plus.io.FileReader()
fileReader.onload = (res)=>{
fileReader.onload = (res) => {
resolve(res.target.result)
}
fileReader.onerror = (err)=>{
fileReader.onerror = (err) => {
reject(err)
}
fileReader.readAsDataURL(file)
}, (err)=>{
}, (err) => {
reject(err)
})
},(err)=>{
}, (err) => {
reject(err)
})
}else if(typeof wx != 'undefined'){
} else if (typeof wx != 'undefined') {
wx.getFileSystemManager().readFile({
filePath: config.url,
encoding: 'base64',
success: function(res) {
success: function (res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
fail: function (error) {
reject(error)
}
})
......@@ -192,7 +173,7 @@ export default {
},
mergeImageByColor(image,color,borderWidth = 0){
mergeImageByColor(image, color, borderWidth = 0) {
let ctx = this.ctx;
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 {
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = color;
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.drawImage(image, 0, 0);
ctx.draw();
},
async mergeImageByImg(item,target){
async mergeImageByImg(item, target) {
let ctx = this.ctx;
ctx.globalCompositeOperation = "source-over";
let fileList = [
......@@ -217,100 +198,100 @@ export default {
await this.downLoadNetworkFile(target),
]
return new Promise((resolve, reject) => {
resolve(
Promise.all(fileList)
.then((images) =>{
const borderWidth = 0;
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)
ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth,this.canvas_width, this.canvas_height);
// 填充描边色
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
resolve(
Promise.all(fileList)
.then((images) => {
const borderWidth = 0;
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)
ctx.drawImage(images[0], dArr[i] * borderWidth, dArr[i + 1] * borderWidth, this.canvas_width, this.canvas_height);
// 填充描边色
ctx.globalCompositeOperation = "source-in";
ctx.fillRect(0, 0, this.canvas_width, this.canvas_height);
// // 添加原图
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(images[1], 0, 0,this.canvas_width, this.canvas_height);
ctx.draw();
// // 添加原图
ctx.globalCompositeOperation = "source-atop";
ctx.drawImage(images[1], 0, 0, this.canvas_width, this.canvas_height);
ctx.draw();
})
)
})
)
})
},
mergeImages(sources = []){
return new Promise((resolve,reject) =>{
mergeImages(sources = []) {
return new Promise((resolve, reject) => {
// Load sources
let fileList = sources.map((source) => {
return this.downLoadNetworkFile(source);
});
resolve(
Promise.all(fileList)
.then((images) =>{
.then((images) => {
console.log(images)
// Draw images to canvas
images.forEach((image) => {
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();
})
)
})
},
scaleImage(){
scaleImage() {
let config = {
};
return {
width: this.compatibilitySize(parseFloat(config.w)*this.scale),
height: this.compatibilitySize(parseFloat(config.h)*this.scale))
width: this.compatibilitySize(parseFloat(config.w) * this.scale),
height: this.compatibilitySize(parseFloat(config.h) * this.scale)
}
},
drawImage(config){
return new Promise(async (resolve,reject)=>{
if(config.url){
drawImage(config) {
return new Promise(async (resolve, reject) => {
if (config.url) {
let type = 0 // 1、network image 2、native image 3、base64 image
let image_url
let reg = /^https?/ig;
if(reg.test(config.url)){
if (reg.test(config.url)) {
type = 1
}else{
if((config.url.indexOf("data:image/png;base64") != -1) || config.url.indexOf("data:image/jpeg;base64") != -1){
} else {
if ((config.url.indexOf("data:image/png;base64") != -1) || config.url.indexOf("data:image/jpeg;base64") != -1) {
type = 3
}else{
} else {
type = 2
}
}
if(type == 1){
if (type == 1) {
// network image
await this.downLoadNetworkFile(config.url).then(res=>{ // two function
await this.downLoadNetworkFile(config.url).then(res => { // two function
image_url = res
}).catch(err=>{
}).catch(err => {
reject(err)
return;
})
}else if(type == 2){
} else if (type == 2) {
// native image
const imageInfoResult = await uni.getImageInfo({
src: config.url
});
try{
if(imageInfoResult.length <= 1){
try {
if (imageInfoResult.length <= 1) {
reject(imageInfoResult[0].errMsg + ':404')
return
}
}catch(e){
reject(e+':500')
} catch (e) {
reject(e + ':500')
return
}
let base64 = await this.urlToBase64({url:imageInfoResult[1].path})
let base64 = await this.urlToBase64({ url: imageInfoResult[1].path })
// #ifdef MP-WEIXIN
await this.base64ToNative({url:base64}).then(res=>{
await this.base64ToNative({ url: base64 }).then(res => {
image_url = res
}).catch(err=>{
reject(JSON.stringify(err)+":501")
}).catch(err => {
reject(JSON.stringify(err) + ":501")
return;
})
// #endif
......@@ -318,81 +299,81 @@ export default {
image_url = base64
// #endif
}else if(type == 3){
} else if (type == 3) {
// #ifdef MP-WEIXIN
await this.base64ToNative({url:config.url}).then(res=>{
await this.base64ToNative({ url: config.url }).then(res => {
image_url = res
}).catch(err=>{
reject(JSON.stringify(err)+":500")
}).catch(err => {
reject(JSON.stringify(err) + ":500")
return;
})
// #endif
// #ifndef MP-WEIXIN
image_url = config.url
// #endif
}else{
} else {
reject("Other Type Errors:101")
return
}
if(config.border_width){
if (config.border_width) {
let border_radius = 0
if(config.border_radius){
if (config.border_radius) {
let multiple = config.w / config.border_radius
border_radius = (parseFloat(config.w) + parseFloat(config.border_width)) / multiple
}
// drawRect
await this.drawRect({
x:parseFloat(config.x) - parseFloat(config.border_width)/2,
y:parseFloat(config.y) - parseFloat(config.border_width)/2,
w:parseFloat(config.w) + parseFloat(config.border_width),
h:parseFloat(config.h) + parseFloat(config.border_width),
color:config.border_color,
border_radius:border_radius,
border_width:config.border_width,
is_radius:config.is_radius
x: parseFloat(config.x) - parseFloat(config.border_width) / 2,
y: parseFloat(config.y) - parseFloat(config.border_width) / 2,
w: parseFloat(config.w) + parseFloat(config.border_width),
h: parseFloat(config.h) + parseFloat(config.border_width),
color: config.border_color,
border_radius: border_radius,
border_width: config.border_width,
is_radius: config.is_radius
})
}
if(config.border_radius){
if (config.border_radius) {
this.setNativeBorderRadius(config)
}else if(config.is_radius){
} else if (config.is_radius) {
//已废弃 is_radius
this.ctx.setStrokeStyle("rgba(0,0,0,0)")
this.ctx.save()
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.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
resolve()
}else{
} else {
let err_msg = "Links cannot be empty:101"
reject(err_msg)
}
})
},
exportImg(){
return new Promise((resolve,reject) => {
setTimeout(() =>{
exportImg() {
return new Promise((resolve, reject) => {
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: this.canvas_id,
quality: 1,
success: (res)=>{
success: (res) => {
// console.log('res',res.tempFilePath)
resolve(res.tempFilePath)
},
fail:(err)=>{
reject(JSON.stringify(err)|| "Failed to generate poster:101")
fail: (err) => {
reject(JSON.stringify(err) || "Failed to generate poster:101")
}
},this)
},1200)
}, this)
}, 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