12-canvas相关

canvas导出图片

html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div to Canvas</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        #myDiv {
            width: 300px;
            height: 200px;
            background-color: lightblue;
            border: 2px solid blue;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div id="myDiv">
    Hello, World!
</div>
<button id="download">下载为图片</button>

<script>
    document.getElementById('download').addEventListener('click', function() {
        // 选择要转换的 div
        const element = document.getElementById('myDiv');

        // 使用 html2canvas 将 div 转换为 canvas
        // 宽高默认是和dom的宽高一致，不过可以在参数中设置，特别注意，scale这个参数，默认是等于你的 浏览器的设备像素比率 ： window.devicePixelRatio
        // 要想准确保持一致，建议设置1
        html2canvas(element,{
            scale: 1,
            width: 300,
            height: 200,
        }).then(canvas => {
            // 将 canvas 转换为图片
            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png');
            link.download = 'div-image.png';
            link.click();
        });
    });
</script>

</body>
</html>

vue

shell

yarn add html2canvas

vue

<template>
  <div :style="backgroundStyle" class="main" ref="capture">
    <div class="blurred-background">
      <div class="content">
        <h1>我是标题</h1>
      </div>
    </div>
  </div>
  <el-button  @click="downloadImage">下载为图片</el-button>
</template>

<script setup>
import {ref, onMounted, nextTick, watch, computed} from 'vue';
import html2canvas from 'html2canvas';

let bgUrl = ref('https://cn.bing.com/th?id=OHR.PointReyes_ROW4397514430_UHD.jpg&rf=LaDigue_UHD.jpg&pid=hp&w=3840&h=2160&rs=1&c=4')
const backgroundStyle = computed(() => {
  return {
    backgroundImage: `url(${bgUrl.value})`,
    backgroundSize: 'cover',
  }
})
const capture = ref(null);
const downloadImage = () => {
  if (!capture.value) return;

  // 使用 html2canvas 将 div 转换为 canvas
  html2canvas(capture.value, {
    scale: 1,
    // width: 800,
    // height: 400,
    useCORS: true,
    allowTaint: false
  }).then(canvas => {
    // canvas 转成base64
    const dataUrl = canvas.toDataURL('image/png');
    // 创建一个下载链接
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = 'download.png'; // 设置下载图片的文件名

    // 触发下载
    link.click();
  });

};
</script>
<style scoped>
.main {
  width: 800px;
  height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;


  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.blurred-background {
  width: 100%; /* 设置宽度 */
  height: 100%; /* 设置高度 */
  overflow: hidden; /* 隐藏超出部分 */
  backdrop-filter: blur(10px); /* 模糊效果 */

  display: flex;
  justify-content: center;
  align-items: center;
}

.content {

  color: red;
}
</style>

12-canvas相关 ​

canvas导出图片 ​

html ​

vue ​

12-canvas相关

canvas导出图片

html

vue