Remplacer les divs avec des images d'arrière-plan par des éléments canvas

Question

J'essaie de remplacer toutes les divs qui ont des images d'arrière-plan par des éléments canvas avec ces images d'arrière-plan dessinées sur eux.

J'ai réussi à faire fonctionner les éléments de base, mais je suis légèrement déconcerté par la différence de qualité d'image entre les deux versions de l'appareil. background-image sur une div et la même image sur une toile.

Voici le code que j'utilise pour ce faire :

$('#container div').each(function(){
    if($(this).css('background-image') != 'none'){
        var bgImage = $(this).css('background-image').replace(/^url|[\(\)]/g, '');
        var image = new Image();
        var attrs = $(this)[0].attributes;
        var dimensions = new Array();
        var canvas = document.createElement('canvas');

        dimensions.push($(this).height())
        dimensions.push($(this).width());

        $(canvas).attr('width',dimensions[0]);
        $(canvas).attr('height',dimensions[1]);
        $(canvas).css('background-image', 'none');

        for(var i = 0; i < attrs.length; i++){
            $(canvas).attr(attrs[i].nodeName,attrs[i].nodeValue);
        }

        var ctx = canvas.getContext('2d');

        image.onload = function () {
            ctx.drawImage(image, 0, 0, image.height, image.width);
        }
        image.src = bgImage;

        $(this).replaceWith(canvas);
    }
});

Voici les résultats :

Il semble que l'image soit étirée pour une raison quelconque, mais j'ai essayé de l'étirer. console.log la largeur/hauteur de l'image que j'utilise en drawImage et les valeurs correspondent aux dimensions de l'image. Les résultats ne montrent qu'un recadrage de l'image - l'image réelle fait 900x4000 pixels environ.

Voici un lien jsfiddle montrant le problème en action :

http://jsfiddle.net/xRKJt/

Quelle est la cause de ce comportement étrange ?

Answer 1

Ha ! (a pris quelques secondes pour comprendre)

L'image possède les attributs naturalWidth et naturalHeight qui reflètent ses dimensions en pixels. Modifiez votre code

        image.onload = function () {
            ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight);
        }

En raison de la taille de l'image, si vous ouvrez l'image dans le navigateur