1

hi everyone i need help when i render a image its becomes blurry so i need help html code;

<html>
    <head>
        <title>Minecraft Skin Renderer</title>
        <script src="js/mcSkinRenderer.js" type="text/javascript"></script>
    </head>
    <body>

        <img class="skin" src="http://www.minecraft.net/skin/Notch.png"/>

        <script type="text/javascript">
            //renderMCSkins(className, scale, replacementImage);
            renderMCSkins('skin', 4);
        </script>
    </body>
</html>

javascript code;

//this is the image displayed when there is no support for canvas
    var defaultImageSrc = "images/charRendered.png";
    //this is the default scale to render the image
    var scale = 4;

    function renderMCSkins(classNameIn, scaleIn, replacementImageIn)
    {
        scale = scaleIn || scale;
        defaultImageSrc = replacementImageIn || defaultImageSrc;

        //we need custom support for IE, because it doesn't support getElementsByClassName
        if (navigator.appName=="Microsoft Internet Explorer") {
            var skinImages = getElementsByClassName(classNameIn, 'img');
        } else {
            var skinImages = document.getElementsByClassName(classNameIn);
        }

        var canvasSupported = supportsCanvas();

        //walk trough the images
        for(var i in skinImages)
        {
            var skin = skinImages[i];

            //if canvas is supported, we render the image to a skin
            if(canvasSupported) {
                if(skin.complete) {
                    renderSkin(skin);
                }
                else {
                    skin.onload = handleSkinLoaded;
                    skin.onerror = handleImageError;
                }
            } else {
                //if it's not supported, we use the default image
                skin.src = defaultImageSrc;
            }
        }
    }

    function handleSkinLoaded() {
        renderSkin(this);
    }

    function handleImageError() {
        //create replacement image
        var replacement = new Image();
        replacement.src = defaultImageSrc;
        //we assign the same classname the image has, for CSS purposes
        replacement.setAttribute('class', this.getAttribute('class'));
        this.parentNode.replaceChild(replacement, this);
    }

    function renderSkin(skinImage) {
        //we create a new canvas element
        var canvas = document.createElement('canvas');
        canvas.width = 64;
        canvas.height = 128;
        //we assign the same classname the image has, for CSS purposes
        canvas.setAttribute('class', skinImage.getAttribute('class'));
        var context = canvas.getContext("2d");
        var s = scale;
        //draw the head
        context.drawImage(skinImage, 8,  8,  8, 8,  4*s,  0*s,  8*s, 8*s);
        //draw the body
        context.drawImage(skinImage, 20, 20, 8, 12, 4*s,  8*s,  8*s, 12*s);
        //draw the left leg
        context.drawImage(skinImage, 4,  20, 4, 12, 4*s,  20*s, 4*s, 12*s);
        //draw the right leg
        context.drawImage(skinImage, 4,  20, 4, 12, 8*s,  20*s, 4*s, 12*s);
        //draw the left arm
        context.drawImage(skinImage, 44, 20, 4, 12, 0*s,  8*s,  4*s, 12*s);
        //draw the right arm
        context.drawImage(skinImage, 52, 20, 4, 12, 12*s, 8*s,  4*s, 12*s);

        //we replace the image with the canvas
        skinImage.parentNode.replaceChild(canvas, skinImage);
    }

    //helper function for IE
    function getElementsByClassName(className, tag, elm){
        var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
        var tag = tag || "*";
        var elm = elm || document;
        var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
        var returnElements = [];
        var current;
        var length = elements.length;
        for(var i=0; i<length; i++){
            current = elements[i];
            if(testClass.test(current.className)){
                returnElements.push(current);
            }
        }
        return returnElements;
    }

    //helper function to check canvas support
    function supportsCanvas() {
        canvas_compatible = false;
        try {
                canvas_compatible = !!(document.createElement('canvas').getContext('2d')); // S60
                } catch(e) {
                canvas_compatible = !!(document.createElement('canvas').getContext); // IE
        } 
        return canvas_compatible;
    }

code isnt mine so im bad in canvas help pls image comes like that blurryskin

but i want it like thatsmoothskin

Trke Rap
  • 63
  • 1
  • 1
  • 6
  • Is the size of the canvas influenced by css? If yes remove that and set width and height only on the canvas element itself. – philipp Mar 11 '16 at 08:30
  • no im not used css its should be scale 1 but i done it 4 because i want it in scale 4 and the code creates the canvas auto and gives it width and height var canvas = document.createElement('canvas'); canvas.width = 64; canvas.height = 128; – Trke Rap Mar 11 '16 at 08:34
  • Just make sure that css does not influences the size in any way, the dimensions set on the element itself (width and height attributes) determine the size of the pixel buffer used – philipp Mar 11 '16 at 08:59
  • http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas – philipp Mar 11 '16 at 09:06
  • If [imageSmoothingEnabled](http://stackoverflow.com/questions/22003687/disabling-imagesmoothingenabled-by-default-on-multiple-canvases) is not working for you, then take a look at this [manual resizing method](http://stackoverflow.com/questions/29633200/pixel-perfect-scaling-of-images-while-zooming-the-canvas-with-fabric-js/29635944#29635944). – markE Mar 11 '16 at 13:59
  • thx imagesmooth worked – Trke Rap Mar 13 '16 at 15:49

1 Answers1

-1

I faced this today on Chrome latest version, literally wasted 3 hours to chase it. Finally it turned out that issue only occurs only when browser zoom is reduced less than 100%, resetting window zoom to 100% resolved the issue.

Hope this info helps the developers to reproduce and fix the bug!!!

meet2KK
  • 1
  • 1