Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Полупрозрачные края картинок (можно ли сделать?) (https://javascript.ru/forum/dom-window/65015-poluprozrachnye-kraya-kartinok-mozhno-li-sdelat.html)

Fesali 20.09.2016 13:07
Полупрозрачные края картинок (можно ли сделать?)
 
Здравствуйте:) .
Очень просто можно сделать в фотошопе картинку с полупрозрачными краями, сохранить в PNG и всё хорошо. Только вот файл такой с альфаканалом весить будет ну очень много (как следствие того- сайт потом долго грузится).
Вопрос, как зделать средствами JS эффект полупрозрачных краёв картинки(jpg,png)? Можно ли? Подскажите пожалуйтса.

Из такого


сделать вот так

warren buffet 20.09.2016 13:39
Ты с какой мухосрани выходишь в сеть, чтобы пинг в даже мегабайт грузился долго?

Не надо тебе этого хотеть. Можно сделать на канвасе или в SVG. Но не надо. Просто поменяй провайдера.

рони 20.09.2016 13:46
Fesali,
https://habrahabr.ru/post/190246/

Fesali 20.09.2016 13:55
Цитата:
Сообщение от warren buffet (Сообщение 429211)
Не надо тебе этого хотеть. Можно сделать на канвасе или в SVG. Но не надо. Просто поменяй провайдера.
У меня с провайдером все нормально. А вот когда заходиш на сайт с планшета или 3G, вот тогда долго грузится, видны все кракозябры и прочее. Пример- Картинка с альфаканалом допустим весит 470кб, лучше втулить вместо неё jpg 130кб (если получится сделать такой эффект) - страница бытрее будет грузится, и трафи не зас..ется. Вот незнаю, как сделать?

рони 20.09.2016 13:57
Fesali,
http://www.netzgesta.de/edge/

рони 20.09.2016 14:01
Fesali,
http://codepo8.github.io/canvas-masking/

Fesali 20.09.2016 14:03
рони , спасибо, похоже это именно оно! Пойду юзать, учится.

Dilettante_Pro 20.09.2016 14:24
Или как-то так
<style>
.container {
   position:relative;
   display: inline-block;
}
.mask {
   position:absolute;
   top: 0px;
   left: 0px;
   width:100%;
   height:100%;
   background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
     background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
  background-image: -o-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
  background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, rgba(255,255,255,0) 40%, rgba(255,255,255,1));
   z-index: 100;
}
</style>
<div class="container">
   <image src= "http://www.imageup.ru/img133/2542020/preload.png"/>
   <div class="mask">
   </div>
</div>

Fesali 20.09.2016 14:57
Dilettante_Pro Это Вы наложили градиент который уходит в белый цвет. Нужно чтоб картинка уходила в прозрачность, чтоб края картинки были прозрачными!

Fesali 20.09.2016 15:15
рони ваш пример что-то не работает.

рони 20.09.2016 15:16
Fesali,

результат canvasmask пост 6

рони 20.09.2016 15:17
Цитата:
Сообщение от Fesali
ваш пример что-то не работает.
картинки и маска должны лежать тамже где скрипт

Fesali 20.09.2016 15:28
что то не получается завести этот канвас http://codepen.io/anon/pen/ALpvQK?editors=1100#0

рони 20.09.2016 15:38
Цитата:
Сообщение от Fesali
что то не получается завести этот канвас
Цитата:
Сообщение от рони
картинки и маска должны лежать тамже где скрипт
Цитата:
SecurityError: The operation is insecure.
http://codepo8.github.io/canvas-masking/canvasmask.js
Line 30
:-?

Fesali 20.09.2016 16:04
В фаерфоксе работает, в опере ни в какую, хотя демо пример работает и в опере. Я понял что в скрипте нужно указать ссылку на изображение img.src = imagecanvas.toDataURL("red-panda.jpg") перепробовал, зараза в опере на работает

рони 20.09.2016 16:06
Fesali,
картинки и скрипт положите к себе на сервер

Fesali 20.09.2016 16:17
Работает, но не нравится что сперва картинка появляется целиком, потом маска её обрезает, с опозданием. На сервер загрузил, все получилось.
Спасибо! буду разбиратся.

рони 20.09.2016 16:24
Fesali,
так не показывайте пока не обработается -- гифку прелоада или с помощью css

laimas 20.09.2016 16:35
Цитата:
Сообщение от Fesali
На сервер загрузил, все получилось.
Если изображения на сервере, то почему это не делать средствами сервера, тем более что речь идет об обычном наложении?

Fesali 20.09.2016 16:56
Цитата:
так не показывайте пока не обработается -- гифку прелоада или с помощью css
Маска centerblur.png она грузится долго, можно ли её заменить градиентом типа radial gradient ???

рони 20.09.2016 17:31
Цитата:
Сообщение от Fesali
она грузится долго
не долго а только когда сработает скрипт , сделайте прелоад этой картинки в head, вынесите из скрипта
вот так
<!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>

Fesali 20.09.2016 18:42
Вот кое-что в гугле нашел, поколдовал и вот что получилось (края только подровнять нужно). Что скажете? 
<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>

рони 20.09.2016 18:48
Fesali,
вам решать :)

warren buffet 22.09.2016 08:35
Fesali, про svg уже было сказано и еще раз скажу, что ты херней занимаешься. Если бы у тебя там был свой инстаграм, это виньетирование оказалось бы в числе других фильтров, но у тебя какая-то анальная идея экономить на трафике.


Часовой пояс GMT +3, время: 10:03.