12-canvas相关
canvas导出图片
dom-to-image实现
html2canvas实现
html 实现
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 html2canvasvue
<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>canvas实现
vue
<template>
<div>
<canvas id="canvas" ref="canvas" width="400" height="200"></canvas>
</div>
<el-button @click="downloadImage">下载为图片</el-button>
</template>
<script setup>
import {ref, onMounted, nextTick, watch, computed} from 'vue';
onMounted(() => {
// 在组件挂载后执行的代码
drawCanvas()
})
const drawCanvas = () => {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 加载背景图片
const img = new Image();
img.src = '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'; // 替换为您的图片URL
img.crossOrigin = "Anonymous";
img.onload = () => {
// 绘制模糊背景
ctx.filter = 'blur(5px)';
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 清除模糊
ctx.filter = 'none';
// 设置文本样式
ctx.fillStyle = 'white'; // 文本颜色
ctx.font = '20px Arial'; // 文本字体与大小
ctx.textAlign = 'center'; // 文本水平居中
ctx.textBaseline = 'middle'; // 文本垂直居中
// 绘制文本
ctx.fillText('Hello, Vue 3!', canvas.width / 2, canvas.height / 2);
}
}
const downloadImage = () => {
const canvas = document.getElementById('canvas');
// 将 canvas 转换为图片
const dataURL = canvas.toDataURL("image/png");
// 创建一个下载链接
const link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas_image.png';
link.click();
};
</script>
<style scoped>
canvas {
border: 1px solid #ccc; /* 可选：给canvas加边框 */
}
</style>