49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const _sfc_main = {
|
|
onReady() {
|
|
this.drawImageOnCanvas();
|
|
},
|
|
methods: {
|
|
drawImageOnCanvas() {
|
|
const query = common_vendor.index.createSelectorQuery().in(this);
|
|
query.select("#myCanvas").fields({ node: true, size: true }).exec(async (res) => {
|
|
if (!res[0])
|
|
return;
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext("2d");
|
|
const dpr = common_vendor.index.getSystemInfoSync().pixelRatio;
|
|
this.canvas = canvas;
|
|
canvas.width = res[0].width * dpr;
|
|
canvas.height = res[0].height * dpr;
|
|
ctx.scale(dpr, dpr);
|
|
try {
|
|
const image = await this.loadImage("https://assets.tech.troyrc.com/sx25/images/background/odertupian.png");
|
|
ctx.drawImage(image, 0, 0, 300, 200);
|
|
} catch (e) {
|
|
common_vendor.index.__f__("error", "at pages/index/index.vue:40", "图片加载失败:", e);
|
|
ctx.fillStyle = "#f0f0f0";
|
|
ctx.fillRect(0, 0, 300, 200);
|
|
ctx.fillStyle = "#999";
|
|
ctx.textAlign = "center";
|
|
ctx.fillText("图片加载失败", 150, 100);
|
|
}
|
|
});
|
|
},
|
|
loadImage(src) {
|
|
return new Promise((resolve, reject) => {
|
|
const image = this.canvas.createImage();
|
|
image.onload = () => resolve(image);
|
|
image.onerror = reject;
|
|
image.src = src;
|
|
});
|
|
}
|
|
}
|
|
};
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return {};
|
|
}
|
|
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
wx.createPage(MiniProgramPage);
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map
|