Как уже упоминалось, проблема заключается в перекрестном домене. К сожалению, tumblr использует другой домен для изображений, нежели тот, на котором размещен ваш блог. В демонстрации ниже я использовал сторонний сайт преобразования (http://www.maxnov.com/getimagedata), чтобы получить данные изображения. Я пробовал то же самое в своей теме tumblr (http://www.tumblr.com/theme/32199), но в итоге не использовал его.
Демо: http://jsfiddle.net/ThinkingStiff/vXWvz/
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://thinkingstiff.com/scripts/get-image-data.js"></script>
<img id="image" alt="" src="http://thinkingstiff.com/images/100x100.png" />
Сценарий:
function initializeImage( imageElement ) {
$.getImageData( {
url: imageElement.src,
success: function( image ) {
if( !imageElement.dataset.color ) {
var canvas = document.createElement( 'canvas' ),
context = canvas.getContext( '2d' ),
width = image.width,
height = image.height;
canvas.width = width;
canvas.height = height;
context.drawImage( image, 0, 0 );
var pixels = context.getImageData( 0, 0, width, height );
for( var y = 0; y < pixels.height; y++ ) {
for( var x = 0; x < pixels.width; x++ ) {
var i = ( y * 4 ) * pixels.width + x * 4;
var avg = (
pixels.data[i]
+ pixels.data[i + 1]
+ pixels.data[i + 2]
) / 3;
pixels.data[i] = avg;
pixels.data[i + 1] = avg;
pixels.data[i + 2] = avg;
};
};
context.putImageData( pixels, 0, 0, 0, 0, pixels.width, pixels.height );
imageElement.dataset.color = imageElement.src;
imageElement.dataset.gray = canvas.toDataURL();
imageElement.src = canvas.toDataURL();
};
}
} );
};
var image = document.getElementById( 'image' );
initializeImage( image );
image.addEventListener( 'mouseover', function () {
this.src = this.dataset.color;
} );
image.addEventListener( 'mouseout', function () {
this.src = this.dataset.gray;
} );
person
ThinkingStiff
schedule
04.12.2011
