css滤镜图片的原样生成
需求：
有个复杂滤镜，已经对图片做了很复杂的操作了，现在又要在这个图片上绘制新的内容，且不被这个复杂滤镜影响。（同时因为框架限制，只能在这个img上绘制）
奇怪需求+1，猜猜为啥这么奇怪？
思考：
1、既然不想影响新的内容，那么只能拆分开来绘制？
可是如果直接在页面上拆分，逻辑太复杂，效率也太低
2、那么索性直接彻底拆开？
干脆对复杂滤镜的图片进行保存，使这个图片能保留滤镜的效果。然后重新引入这个图片~
还好这个图片确实不会变，都是资源库的，说干就干！
解决方案：
原理很简单，就是在原来image的基础上，新建一个canvas，然后增加滤镜效果，画出这个图片，最后保存这个图片到本地。
js代码简单版本（未实现批量）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apply Filter to Image</title>
</head>
<body>
<img id="originalImage" src="image_path.jpg" alt="Original Image">
<canvas id="canvas" style="display: none;"></canvas>
<script>
const originalImage = document.getElementById('originalImage');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
originalImage.onload = function() {
canvas.width = originalImage.width;
canvas.height = originalImage.height;
ctx.filter = 'brightness(0.9) contrast(1.3) grayscale(1) hue-rotate(140deg) opacity(1) saturate(1) sepia(1) invert(1)';
ctx.drawImage(originalImage, 0, 0);
const filteredImageUrl = canvas.toDataURL('image/png');
// 创建一个新的图片元素来显示处理后的图片
const filteredImage = new Image();
filteredImage.src = filteredImageUrl;
// 将处理后的图片添加到页面中
document.body.appendChild(filteredImage);
};
originalImage.src = "image_path.jpg";
</script>
</body>
</html>
