Mini Program uses canvas to draw pictures and developer tools to edit them, but it is not possible to upload them online. Why?
`/ / canvas global configuration
var context = null;// use wx.createContext to get drawing context context
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
var tmpFilePath = null;
/ get system information
wx.getSystemInfo ({
success: function (res) {
canvasw = res.windowWidth;//
canvash = res.windowHeight;}
});
/ / Registration page
Page ({
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)},
canvasStart: function (event) {
isButtonDown = true;
arrz.push(0);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);},
canvasMove: function (event) {
if (isButtonDown) {
arrz.push(1);
arrx.push(event.changedTouches[0].x);
arry.push(event.changedTouches[0].y);
};
for (var i = 0; i < arrx.length; iPP) {
if (arrz[i] == 0) {
context.moveTo(arrx[i], arry[i])
} else {
context.lineTo(arrx[i], arry[i])
};
};
context.clearRect(0, 0, canvasw, canvash);
context.drawImage(tmpFilePath, 0, 0, canvasw, canvash)
context.stroke();
context.draw(true);},
canvasEnd: function (event) {
isButtonDown = false;},
cleardraw: function () {
//
arrx = [];
arry = [];
arrz = [];
context.clearRect(0, 0, canvasw, canvash);
context.draw(true);},
getimg: function () {
if (arrx.length == 0) {
wx.showModal({
title: "",
content: "",
showCancel: false
});
return false;
};
//
wx.canvasToTempFilePath({
canvasId: "canvas",
success: function (res) {
console.log(res.tempFilePath);
//
wx.uploadFile({
url: "a.php", //
filePath: res.tempFilePath,
name: "file",
formData: { //HTTP form data
"user": "test"
},
success: function (res) {
console.log(res);
},
fail: function (res) {
console.log(res);
},
complete: function (res) {
}
});
}
})},
/ *
- initial data of the page
* /
data: {
src: ""},
/ *
- Lifecycle function-- load the listening page
* /
onLoad: function (options) {
// wx.createContext context
context = wx.createCanvasContext("canvas");
context.beginPath()
context.setStrokeStyle("-sharpffff00");
context.setLineWidth(10);
context.setLineCap("round");
context.setLineJoin("round");
//
wx.downloadFile({
url: "https://img.codeshelper.com/upload/img/2021/03/03/3akko3xxooc2586.png",
success: function(res) {
console.log(333)
if (res.statusCode == 200) {
context.drawImage(res.tempFilePath, 0, 0, canvasw, canvash)
context.draw(true)
tmpFilePath = res.tempFilePath
}
console.log(444)
}
})},
}) `