vue3-06-html2canvas使用 + zoom、transform: scale图片缩放适配方案 + 动态引入静态资源（打包上线后也能使用）

一、图片缩放适配方案

问题：

• 最近写了一个vue3的快简制图项目，下载图片我用到了html2canvas
• 当图片超出屏幕宽度后，我需要对图片进行缩放，使用zoom缩放后占位大小发生改变（占位为缩放后的大小），但是html2canvas不支持这个属性，使用这个属性后下载的图片有问题
• 于是我又使用transform：scale缩放，这个属性html2canvas支持，但是这个缩放的占位不会发生改变，只是视觉上变小了（例如一个图片width为2000px，缩放0.5倍，视觉效果是1000px，但是实际的占位还是2000px）

解决方案：

• 写两个一模一样的组件 picture1 和 picture2，其中 picture1 使用 zoom 缩放，显示给用户看，picture2使用 transform：scale
  缩放，然后使用绝对定位（脱标），然后让它的z-index为负数（隐藏在其他页面后面，这样用户就看不见了），最后html2canvas下载图片的时候使用picture2
• 总结来说：就是一个组件展示给用户看，另一个组件用来的下载图片，这样不用担心缩放的一系列问题

项目地址：

二、html2canvas 的具体使用

安装：

pnpm install html2canvas

引入：

import html2canvas from 'html2canvas'

picture2.vue

	<div class="github-header-image" ref="pictureRef"></div><button @click="download">点击下载</button>......import { ref } from 'vue'import html2canvas from 'html2canvas'// 图片实例let pictureRef = ref()// 下载图片function download() {// backgroundColor：画布的背景色，null说明背景色为透明// scale：缩放比例，默认为1（保证图片显示多大，下载下来的图片就是多大）html2canvas(pictureRef.value, { backgroundColor: null, scale: 1 }).then((canvas) => {let imageURL = canvas.toDataURL('image/png')let a = document.createElement('a')a.href = imageURLa.download = 'github-header-image'a.click()pictureStore.DownloadPicture() // 下载结束}).catch((error) => {alert('下载失败')console.log(new Error(error))})}

三、静态资源（图片）的动态引入

问题： 我引入的图片路径为 ‘/src/assets/images/patterns/jigsav-thumbnail.svg’，在本地运行的时候能正常显示图片，但是当我项目打包成 dist 文件夹上线后，图片无法显示了，原因是 dist 文件夹里根本就没有这个路径（文件夹）

解决方案：

/src /utils /getAssetsFile.ts

export const getPatternFile = (url: string): string => { // 这里new URL里的第一个参数，要换成自己图片的存储目录return new URL(`../assets/images/patterns/${url}`, import.meta.url).href
}

background.vue

<template v-for="item in patternsData" :key="item.id"><img :src="item.src" :alt="item.alt" />
</template>
...// 引入获取花样显示图片的路径的方法
import { getPatternFile } from '@/utils/getAssetsFile'
// 花样数据
let patternsData = reactive([{id: 1,src: getPatternFile('jigsaw-thumbnail.svg'),},{id: 2,src: getPatternFile('github-thumbnail.svg'),}])