Цитата:
вот так
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.mask.hide{
opacity: 0;
}
.mask{
transition:opacity .8s;
}
</style>
<script>(function(){
var mask = document.createElement('img');
mask.src = "centerblur.png";
var width = 0;
var height = 0;
window.addEventListener('load', function(ev){
var imagecanvas = document.createElement('canvas');
var imagecontext = imagecanvas.getContext('2d');
var images = document.querySelectorAll('.mask');
var all = images.length;
while (all--) {
var img = images[all];
width = img.offsetWidth;
height = img.offsetHeight;
imagecanvas.width = width;
imagecanvas.height = height;
imagecontext.drawImage(mask, 0, 0, width, height);
imagecontext.globalCompositeOperation = 'source-atop';
imagecontext.drawImage(img, 0, 0);
img.src = imagecanvas.toDataURL();
img.classList.remove('hide')
}
}, false);
})();</script>
</head>
<body>
<img src="preload.png" alt="" class="mask hide" >
</body>
</html>
|
Вот кое-что в гугле нашел, поколдовал и вот что получилось (края только подровнять нужно). Что скажете?
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="620" height="412">
<mask id="mask1">
<ellipse cx="50%" cy="50%" rx="40%" ry="43%" fill="white" filter="url(#filter2)"></ellipse>
</mask>
<image xlink:href="http://www.imageup.ru/img133/2542020/preload.png" width="640" height="412" mask="url(#mask1)"></image>
</svg>
<svg width="0" height="0">
<defs>
<filter id="filter2">
<feGaussianBlur stdDeviation="20"></feGaussianBlur>
</filter>
<linearGradient id="gradient" x1="0" y1="00%" x2="0" y2="100%">
<stop stop-color="black" offset="0"></stop>
<stop stop-color="white" offset="1"></stop>
</linearGradient>
</defs>
</svg>
</div>
|
Fesali,
вам решать :) |
Fesali, про svg уже было сказано и еще раз скажу, что ты херней занимаешься. Если бы у тебя там был свой инстаграм, это виньетирование оказалось бы в числе других фильтров, но у тебя какая-то анальная идея экономить на трафике.
|
| Часовой пояс GMT +3, время: 14:27. |