如何在文本下放置图像颜色？答案

【问题标题】：How does one go about laying image colors under text?如何在文本下放置图像颜色？
【发布时间】：2018-01-21 04:31:50
【问题描述】：

使文本颜色根据其在相应图像文件中的适当位置采取颜色的最佳方法是什么？此外，有些文本有些部分是一种颜色，有些部分是另一种颜色，因此看起来很流畅。

Twitter Data 这样做了，其中的文本都是提到 Prince 的推文。

【问题讨论】：

标签： css html image image-processing canvas

【解决方案1】：

您可以使用mix-blend-mode: difference; 轻松完成此任务。

.bg {
  background-image: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
  background-position: center;
  background-size: cover;
}

.el,
.el2,
.el3 {
  padding: 20px;
}

.el {
    color: rgb(255, 255, 255);
    mix-blend-mode: difference;
}

.el2 {
    color: rgb(255, 0, 0);
    mix-blend-mode: difference;
}

.el3 {
    color: rgb(255, 255, 0);
    mix-blend-mode: difference;
}

<div class="wrapper">
  <div class="bg">
    <div class="el">directly opposite image color. directly opposite image color. directly opposite image color.</div>
    <div class="el2">one variant. one variant. one variant. one variant. one variant. one variant. one variant.</div>
    <div class="el3">another variant. another variant. another variant. another variant. another variant.</div>
  </div>
</div>

【讨论】：

【解决方案2】：

这叫compositing。

通过 canvas2d API，管理起来非常容易：

globalCompositeOperation 属性提供了相当广泛的不同合成模式列表。

var img = new Image();
img.onload = function(){
canvas.width = this.width;
canvas.height = this.height;

var ctx = canvas.getContext('2d');
ctx.font = '8px sans-serif';

for(var i=0; i<300; i++){ // fill some dummy text
  let txt = 'Lorem ipsum dolor sit amer '.repeat(20).substring(~~(Math.random()*27));
  ctx.fillText(txt, 0, 7*i)
  }
// at this moment our canvas only has pixels where text is filled.
// 'source-atop' will place new pixels only where there already were pixels
ctx.globalCompositeOperation = 'source-atop';
ctx.drawImage(img, 0,0);
}
img.src = 'https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg';

&lt;canvas id="canvas" width="500" height="300"&gt;&lt;/canvas&gt;

请注意，对于文本，这也只能在现代浏览器中使用 CSS 来实现，这要归功于 background-clip: text; 属性：

text.textContent = 'Lorem ipsum dolor sit amer '.repeat(2000);

#text{
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg);
  /* pre-fixed (both FF and chrome)*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Standards */
  background-clip: text;
  text-fill-color: transparent;
  
  width: 800px;
  height: 1164px;
  line-height: 0.8;
  overflow: hidden;
  text-overflow: hidden;
  font-size: 8px;
  }

&lt;div id="text"&gt;&lt;/div&gt;

【讨论】：