<script setup>
import jpegDemo from "./jpegDemo.jpeg";
import pngDemo from "./pngDemo.png";
import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
import bmpDemo from "./bmpDemo.bmp";
import { useRouter } from "vue-router";

const router = useRouter();

const onKeyDown = (ev) => {
  // 8:Backspace, 27:Escape, 10000:盒子返回键
  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
    // 关掉TextureCache(通过将waterLevel设置成-1)
    window.JsvCoreApi.setRenderGlobalConfig({
      texCache: -1,
    });

    router.go(-1); // 有router时，回退
    return true;
  }
  return false;
};
</script>
<template>
  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
    <div class="allBgc">
      <div class="block">
        <div :style="{ left: 0, top: 0 }">
          <div class="leftFont top0">
            {{ `原图加载\n内存占用由图片尺寸决定` }}
          </div>
          <div class="leftFont top250">
            {{
              `指定尺寸加载\n内存占用由给定尺寸决定，图片质量基本没变，但更省内存`
            }}
          </div>
        </div>

        <div :style="{ left: 220, top: 0 }">
          <img alt="" class="graphSize top0" :src="bmpDemo" />
          <img
            alt=""
            class="graphSize top250"
            data-jsv-img-scaledown-tex
            :src="bmpDemo"
          />
          <div class="underFont">
            {{ `bmp图片\n指定尺寸噪点明显更大` }}
          </div>
        </div>

        <div :style="{ left: 440, top: 0 }">
          <img alt="" class="graphSize top0" :src="jpegDemo" />
          <img
            alt=""
            class="graphSize top250"
            data-jsv-img-scaledown-tex
            :src="jpegDemo"
          />
          <div class="underFont">
            {{ "jpg/jpeg图片" }}
          </div>
        </div>

        <div :style="{ left: 660, top: 0 }">
          <img alt="" class="graphSize top0" :src="pngDemo" />
          <img
            alt=""
            class="graphSize top250"
            data-jsv-img-scaledown-tex
            :src="pngDemo"
          />
          <div class="underFont">
            {{ `png有透明图片\n指定尺寸有明显锯齿` }}
          </div>
        </div>

        <div :style="{ left: 880, top: 0 }">
          <img alt="" class="graphSize top0" :src="pngNoAlphaDemo" />
          <img
            alt=""
            :src="pngNoAlphaDemo"
            class="graphSize top250"
            data-jsv-img-scaledown-tex
          />
          <div class="underFont">
            {{ `png无透明图片` }}
          </div>
        </div>
      </div>
    </div>
  </jsv-focus-block>
</template>
<style scoped>
.allBgc {
  width: 1920;
  height: 1080;
  background-color: #334c4c;
}
.block {
  left: 20;
  top: 50;
}
.leftFont {
  left: 0;
  width: 210;
  height: 200;
  color: #ffffff;
  font-size: 30;
}
.top0 {
  top: 0;
}
.top250 {
  top: 250;
}
.graphSize {
  left: 0;
  width: 200;
  height: 200;
  border-radius: 15 15 15 15;
}
.underFont {
  left: 0;
  top: 500;
  width: 200;
  height: 200;
  color: #ffffff;
  font-size: 20;
}
</style>
