0

我目前有一个界面，其中包含您可以滑动浏览的产品图像列表。仅 - 这些图像被设置为 div 的背景图像，因此我可以使用 CSS 的 background-size:cover 方法来处理图像的大小。

我想要做的是在这些背景图像中获取主色，并将页面背景设置为该颜色。我已经成功实现了这个库以获取主色并完成此操作，但为了做到这一点，我必须获取背景图像中使用的 URL，使用该 URL 作为 SRC 创建一个新图像，添加临时图像到 DOM 以获取主色，然后删除临时图像。它真的很慢，我觉得可能有更好的方法。

有谁知道我如何能够更快地做到这一点？最好直接从包含背景图像的 div 中采样颜色，而不必渲染新图像？这是我的代码：

var sampleImageURL = this.productsItemsCollection.models[modelIndex].get('image');

if (sampleImageURL != ""){
  //this.setImagePalette(sampleImageURL); //MH - reenable to allow background color switching
}

setImagePalette: function(sampleImageURL){

  var $sampleImage = $('<img class="palette-image" src="' +sampleImageURL + '" style="display: none; width: 100px; height: 100px;" crossOrigin="anonymous" />'); //MH - find a better way than appending a temporary image
  $('body').append($sampleImage);
  var sampleImage = $('.palette-image')[0];

  sampleImage.addEventListener("load", _.bind(this.getImagePalette,this,sampleImage));

},

getImagePalette: function(sampleImage){
    var colorArray = this.colorThief.getColor(sampleImage);
    var sampleColorRGB = 'rgb(' + colorArray[0] + ',' + colorArray[1] + ',' + colorArray[2] + ')';
    Backbone.trigger('setBackgroundColor', sampleColorRGB);
    $('.palette-image').remove();
},
4

0 回答 0