一个前端程序的pwa实现

luokuang

一个前端程序的pwa实现。
运行截图：


说明：
1. 支持PWA离线访问
2. 支持PC和H5截图套壳
3. 支持横向或者纵向切换
4. 支持修改设备尺寸

在线访问：
https://casing.pages.dev/

代码：
casing.zip (70.84 KB, 下载次数: 20)

2024-11-27 15:32 上传

点击文件名下载附件

[HTML] 纯文本查看 复制代码

<template>
  <div class="image-framer">
    <div class="layout-container">
      <div class="control-panel">
        <div class="upload-section">
          <input type="file" @change="handleImageUpload" accept="image/*" ref="fileInput" class="file-input" />
          <button @click="triggerFileInput" class="upload-btn">上传图片</button>
          <div v-if="imageUrl" class="image-info">
            <p>原始尺寸: {{ originalImageSize.width }} × {{ originalImageSize.height }} px</p>
          </div>
        </div>

        <div class="controls" v-if="imageUrl">
          <div class="frame-selector">
            <h3>选择设备类型</h3>
            <button :class="{ active: frameType === 'browser' }" @click="frameType = 'browser'">PC浏览器</button>
            <button :class="{ active: frameType === 'phone' }" @click="frameType = 'phone'">手机</button>
          </div>

          <div v-if="frameType === 'phone'" class="orientation-control">
            <h3>屏幕方向</h3>
            <button @click="toggleOrientation" :class="{ active: isLandscape }" class="orientation-btn">
              <span class="orientation-icon">{{ isLandscape ? '&#10231;' : '&#10234;' }}</span>
              {{ isLandscape ? '横向' : '纵向' }}
            </button>
          </div>

          <div class="size-controls">
            <div class="size-header">
              <h3>调整尺寸</h3>
              <button 
                v-if="frameType === 'phone'" 
                class="reset-size" 
                @click="resetToDeviceSize"
                :class="{ active: !useCustomSize }"
              >
                使用标准尺寸
              </button>
            </div>
            <div class="size-inputs">
              <label>
                宽度:
                <input 
                  type="number" 
                  :value="frameWidth" 
                  @input="e => { useCustomSize = true; updateFrameWidth(e.target.value) }"
                  :min="200"
                />
              </label>
              <label>
                高度:
                <input 
                  type="number" 
                  :value="frameHeight" 
                  @input="e => { useCustomSize = true; updateFrameHeight(e.target.value) }"
                  :min="200"
                />
              </label>
              <label class="maintain-ratio">
                <input 
                  type="checkbox" 
                  v-model="maintainAspectRatio"
                />
                保持比例
              </label>
            </div>
          </div>

          <button @click="downloadImage" class="download-btn">下载图片</button>
        </div>
      </div>

      <div class="preview-panel">
        <div class="preview-area">
          <div :class="['frame', frameType, { landscape: isLandscape }]" :style="frameStyle">
            <div v-if="frameType === 'browser'" class="browser-controls">
              <div class="browser-dots">
                <span></span>
                <span></span>
                <span></span>
              </div>
              <div class="browser-address">
                <div class="address-bar"></div>
              </div>
            </div>
            <div v-if="frameType === 'phone'" class="phone-notch" :style="notchStyle"></div>
            <div class="frame-content">
              <img v-if="imageUrl" :src="imageUrl" :style="imageStyle" />
              <div v-else class="placeholder-content">
                <div class="placeholder-text">请上传图片</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

AiniWang

图中的上衣是什么东西

luokuang

AiniWang 发表于 2024-11-27 17:45
图中的上衣是什么东西

哈哈，是另一款软件的截图，例子

AiniWang

luokuang 发表于 2024-11-27 17:48
哈哈，是另一款软件的截图，例子

好奇是什么软件

luokuang

AiniWang 发表于 2024-11-28 10:18
好奇是什么软件

https://www.52pojie.cn/thread-1985972-1-1.html

d199212

现在没人做pwa了吧

苏紫方璇

请在帖子中粘贴部分核心代码
一、本版块仅限分享编程技术和源码相关内容，发布帖子必须带上关键代码和具体功能介绍【20220924强制执行】

Edcison

谢谢楼主

focusql11

学习学习，谢谢楼主