large-image-renderer

High-performance Canvas Large Image Rendering Solution, Compatible with Chromium/Non-Chromium Browsers.

高性能 canvas 渲染大图解决方案，适配 Chromium / 非 Chromium 浏览器

安装

pnpm i -D @cnguu/large-image-renderer

使用

// index.vue
<script setup lang="ts">
import { largeImageRenderer } from '@cnguu/large-image-renderer'
import { onMounted } from 'vue'

onMounted(() => {
  largeImageRenderer({
    imageUrl: 'https://cdn.jsdelivr.net/gh/cnguu/large-image-renderer@main/packages/playground/src/public/eso1208a.png',
    canvas: 'test',
  })
})
</script>

<template>
  <div class="container">
    <canvas id="test" width="100%" height="100%" />
  </div>
</template>

<style scoped>
.container {
  width: 200px;
  height: 200px;
}
</style>

参数

DrawBigImageOptions