<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
a{text-decoration: none; font-family: "microsoft yahei"}
.blur-img{position: relative; width: 1440px; height: 900px; margin: 0 auto;}
.blur-img img{width: 1440px; height: 900px; filter: blur(20px);-webkit-filter: blur(20px); -moz-filter:blur(20px); -o-filter:blur(20px); -ms-filter:blur(20px); z-index: 1;}
#canvas{position: absolute; left: 0; top: 0; z-index: 100; display: block;}
.blur-btn{position: absolute; bottom: 0; width: 80px; height: 30px; text-align: center; line-height: 30px; font-size: 16px; color: #fff; background: #218868; display: block; z-index: 102;}
.blur-btn.reset{left: 200px;}
.blur-btn.show{right: 200px; background: #CD69C9;}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="">
<canvas id="canvas">
该浏览器不支持canvas，请更换
</canvas>
<a href="##" class="blur-btn reset">RESET</a>
<a href="##" class="blur-btn show" >SHOW</a>
</div>
<script>
var canvasWidth = 1440;
var canvasHeight = 900;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var image = new Image();
image.src = "1.jpg";
image.onload = function(e){
context.drawImage(image,0,0);
}
</script>
</body>
</html>
image.src = "1.jpg";
上面这段代码少了文件夹名称。
image.src = "images/1.jpg";