Question

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

我想要做的是在这些背景图像中获得主色，并将页面背景设置为该颜色。我已经成功实现this library以获取主导颜色并完成此操作，但为了做到这一点，我必须抓住背景图像中使用的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();
},

有没有办法从背景图像中获取画布数据

0 个答案: