canvas 2d crteateImage onload 无法执行?
仓库地址 https://git.weixin.qq.com/qianyeyixi/test_canvas_img.git async chooseImags() {
const data = await wx.chooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
})
console.log(data);
const ImgObj = await wx.getImageInfo({
src: data.tempFilePaths[0],
})
this.setData({
imgSrc: ImgObj.path,
imgWidth: ImgObj.width,
imgHeight: ImgObj.height
})
console.log(ImgObj);
console.log(this.data.frameSrc);
const frameObj = await wx.getImageInfo({
src: this.data.frameSrc
})
console.log(frameObj);
this.setData({
ImgObj,
frameObj
})
},
saveImgToPhone() {
const t = this;
const i = this.ctx;
const c = this.canvasNode;
wx.showLoading({
title: "生成中",
});
let {ImgObj, frameObj} = this.data
let _offsetX = Math.abs((frameObj.width - ImgObj.width) / 2);
let _offsetY = Math.abs((frameObj.height - ImgObj.height) / 2);
let _width = Math.max(ImgObj.width, frameObj.width);
let _height = Math.max(ImgObj.height, frameObj.height);
let framImgEl = c.createImage();
console.log("framImgEl start", framImgEl);
framImgEl.onLoad = () => {
i.drawImage(
framImgEl,
0,
0,
_width,
_height,
0,
0,
frameObj.width,
frameObj.height
);
};
framImgEl.onerror = (e) => {
console.log("framImgEl err", framImgEl, e);
}
framImgEl.src = frameObj.path;
let imgEl = c.createImage();
console.log("imgEl start", imgEl);
imgEl.onerror = (e) => {
console.log("imgEl err", imgEl, e);
}
console.log("imgEl create", imgEl);
imgEl.onLoad = () => {
console.log("imgEl", imgEl);
i.drawImage(
imgEl,
_offsetX,
_offsetY,
imgInfo.width,
imgInfo.height
);
};
imgEl.src = ImgObj.path;
setTimeout(() => {
t.getTemFile({
width: _width,
height: _height
})
}, 800)
},
getTemFile(options) {
console.log("getTemFile 触发", options);
let t = this;
let c = this.canvasNode;
wx.canvasToTempFilePath({
canvas: t.canvasNode,
})
.then((res) => {
console.log("getTemFile success", res);
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
})
.then((_res) => {
wx.hideLoading()
console.log(" _res", _res);
})
.catch((err) => {
console.log("err", err);
})
})
.catch((err) => {
console.log("getTemFile err", err);
});
},
并没有 打印onload 里边的参数 导出是空白
