我的目的在canvas上加一些滤镜效果并把它保存下来，我想到用CSS3的滤镜，比起操作像素点，CSS3方便了很多，但是保存图片的时候出现了问题，加上的滤镜并没有保存下来，我试着把加有滤镜的canvas画到canvas也没有效果。
2
389
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3_demo</title>
<style>
canvas { border: 1px solid #aaa;}
#canvas1 { -webkit-filter: blur(5px); filter: blur(5px); }
</style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
<canvas id="canvas2" width="500" height="500"></canvas>
<script>
var canvas1 = document.getElementById('canvas1');
var canvas2 = document.getElementById('canvas2');
var cxt1 = canvas1.getContext('2d');
var cxt2 = canvas2.getContext('2d');
var img = new Image();
img.src = '1.jpg';
img.onload = function(){
cxt1.drawImage(img,0,0,500,500);
cxt2.drawImage(canvas1,0,0,400,400);
}
</script>
</body>
</html>
我的问题就是：有没有什么办法可以把CSS3滤镜加上去，能用CSS3最好，用不了的话那也只能操作像素点了
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
硬要往这方面想的话，我觉得可以先把canvas的内容生成图片，然后让css3滤镜作用在这图片上，然后再利用
html2canvas这个库将图片转回canvas，此时canvas已经是带上滤镜效果的了，这时你再保存为图片就可以了仅仅是需要给模糊的话，做一张半透明的图片，将这个图片绘制在canvas最上面即可！canvas的模糊效果，有现成的插件StackBlur.js，可以试试