Saya mencoba membuat bayangan dari sebuah gambar menggunakan Color Thief (seperti gambar di bawah):

Colored shadow

Saya mencoba membuat Color Thief mendeteksi warna dan membuat bayangan terlihat seperti bayangan yang diwarnai oleh warna yang berasal dari Color Thief.

Bagaimana saya bisa melakukan ini?

-1
Youssef Elmajbri 17 Agustus 2017, 00:43

2 jawaban

Jawaban Terbaik

Karena masalah lintas domain dengan kanvas dan gambar, saya tidak dapat menghasilkan cuplikan yang berfungsi di sini, tetapi ini akan berhasil (mungkin dengan sedikit penyesuaian).

var $img = $('img');

$img.load(function() {
  var colorThief = new ColorThief();
  // uncomment this (x-domain issues):
  //var color = colorThief.getColor($img.get(0));

  // here's what it would produce:
  var color = 'rgb(72, 174, 216)';

  $img.css('box-shadow', color + ' 0 5px 15px');
});
img {
  display: block;
  width: 200px;
  margin: 10px auto 0;
  border-radius: 10px;
}

canvas {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.0.1/color-thief.min.js"></script>

<img id="image" src="https://i.imgur.com/rb3admc.jpg" />
0
Jon Uleis 16 Agustus 2017, 22:12

Anda dapat menambahkan beberapa bayangan dalam warna berbeda dengan generator ini https://developer.mozilla.org/en- US/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator.

-2
woiciech5 16 Agustus 2017, 21:56