83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("./common/vendor.js");
|
|
const _sfc_main = {
|
|
props: {
|
|
imgUrl: String
|
|
},
|
|
data() {
|
|
return {
|
|
canvasContext: null
|
|
};
|
|
},
|
|
watch: {
|
|
imgUrl: {
|
|
handler() {
|
|
this.drawImage();
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initCanvas();
|
|
},
|
|
methods: {
|
|
initCanvas() {
|
|
const query = common_vendor.index.createSelectorQuery().in(this);
|
|
query.select("#myCanvas").fields({ node: true, size: true }).exec((res) => {
|
|
if (!res[0])
|
|
return;
|
|
this.canvas = res[0].node;
|
|
this.ctx = res[0].node.getContext("2d");
|
|
this.canvasContext = this.ctx;
|
|
const dpr = common_vendor.index.getSystemInfoSync().pixelRatio;
|
|
this.canvas.width = res[0].width * dpr;
|
|
this.canvas.height = res[0].height * dpr;
|
|
this.ctx.scale(dpr, dpr);
|
|
if (this.imgUrl) {
|
|
this.drawImage();
|
|
}
|
|
});
|
|
},
|
|
async drawImage() {
|
|
if (!this.ctx || !this.imgUrl)
|
|
return;
|
|
try {
|
|
const image = await this.loadImage(this.imgUrl);
|
|
this.clearCanvas();
|
|
this.ctx.drawImage(image, 0, 0, 800, 600);
|
|
} catch (e) {
|
|
common_vendor.index.__f__("error", "at pages/index/canvas.vue:65", "图片加载失败:", e);
|
|
this.clearCanvas();
|
|
this.ctx.fillStyle = "#f0f0f0";
|
|
this.ctx.fillRect(0, 0, 1e3, 800);
|
|
this.ctx.fillStyle = "#999";
|
|
this.ctx.textAlign = "center";
|
|
this.ctx.textBaseline = "middle";
|
|
this.ctx.fillText("图片加载失败", 150, 100);
|
|
}
|
|
},
|
|
clearCanvas() {
|
|
if (this.ctx) {
|
|
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
}
|
|
},
|
|
loadImage(src) {
|
|
return new Promise((resolve, reject) => {
|
|
const image = this.canvas.createImage();
|
|
image.src = src;
|
|
image.onload = () => resolve(image);
|
|
image.onerror = (err) => {
|
|
common_vendor.index.__f__("error", "at pages/index/canvas.vue:88", "图片加载错误", err);
|
|
reject(err);
|
|
};
|
|
});
|
|
}
|
|
}
|
|
};
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return {};
|
|
}
|
|
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
exports.MiniProgramPage = MiniProgramPage;
|
|
//# sourceMappingURL=../.sourcemap/mp-weixin/canvas.js.map
|