30 lines
1.0 KiB
Vue
30 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
const testImg = '/_nuxt/assets/img/plan.png'
|
|
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
|
|
const context: Ref<CanvasRenderingContext2D | undefined> = ref();
|
|
console.log(testImg)
|
|
onMounted(async () => {
|
|
context.value = canvasElement.value?.getContext('2d') || undefined;
|
|
if (context.value) {
|
|
const img = await new Promise((resolve, reject) => {
|
|
let img = new Image()
|
|
img.onload = () => resolve(img)
|
|
img.onerror = reject
|
|
img.src = testImg
|
|
return img
|
|
})
|
|
const sourceWidth = img.width
|
|
const sourceHeight = img.height
|
|
|
|
const canvasHeight = canvasElement.value?.height || 1
|
|
const canvasWidth = canvasElement.value?.width
|
|
|
|
const imgHeight = (sourceHeight / sourceWidth) * canvasHeight
|
|
context.value.drawImage(img, 0, 0, canvasWidth, imgHeight)
|
|
// context.value.scale(2,2)
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<canvas ref="canvasElement" width="1300" height="1000"></canvas>
|
|
</template> |