Javascript 如何使用HTML5技术选择和模糊图像的某些部分

用最新的Chrome浏览器就足够了

1-选择图像插件

2-使图像的某些部分模糊

CSS代码

.content {
    width: 70%;
    height: 70%;
    border:2px solid;
    border-radius:20px;
    position: fixed;
    top: 15%;
    left: 15%;
    z-index:10;
    background-color: rgba(168, 235, 255, 0.2);
    /*filter: blur(2px); 
-moz-filter: blur(2px);
-o-filter: blur(2px); 
-ms-filter: blur(2px);*/
}
.background {
    width:100%;
    height:100%;
    background-image:url('http://www.travel.com.hk/region/time_95.jpg');
    z-index:2;
    position:fixed;
    /*-webkit-filter: blur(2px);*/
}
.bluredBackground {
    width:100%;
    height:100%;
    display:block;
    background-image:url('http://www.travel.com.hk/region/time_95.jpg');
    z-index:1;
    position:absolute;
    top:-20%;
    left:-20%;
    padding-left:20%;
    padding-top:20%;
    -webkit-filter: blur(2px);
}
.mask {
    width: 70%;
    height: 70%;
    border:2px solid;
    border-radius:20px;
    position: fixed;
    top: 15%;
    left: 15%;
    z-index:10;
    overflow:hidden;
}

Img区域选择提供x1、y1、x2、和y2。

尝试将其放置在map area中，但不可能为其提供任何css样式。如何合并1和2个示例