画布渲染模糊不平滑答案

【问题标题】：Canvas rendering blurry not smooth画布渲染模糊不平滑
【发布时间】：2017-10-28 19:12:49
【问题描述】：

大家好，我在渲染图像时需要帮助，图像变得模糊，所以我需要帮助 html 代码；

<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 代码；

//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;
    }

代码不是我的，所以我在画布上很糟糕，请帮助图像是这样的 blurryskin

但我想要那样smoothskin

【问题讨论】：

画布的大小受css影响吗？如果是，请删除它并仅在画布元素本身上设置宽度和高度。
没有我没有使用 css 它应该是比例 1 但我做了 4 因为我想要它在比例 4 和代码创建画布自动并给它宽度和高度 var canvas = document.createElement( '帆布'）;画布.宽度 = 64; canvas.height = 128;
只要确保 css 不会以任何方式影响大小，在元素本身上设置的尺寸（宽度和高度属性）决定了所用像素缓冲区的大小
stackoverflow.com/questions/7615009/…
如果imageSmoothingEnabled 不适合您，请查看此manual resizing method。

标签： javascript html canvas

【解决方案1】：

我今天在 Chrome 最新版本上遇到了这个问题，实际上浪费了 3 个小时来追逐它。最后发现这个问题只有在浏览器缩放小于 100% 时才会出现，将窗口缩放重置为 100% 解决了这个问题。

希望此信息能帮助开发人员重现和修复错误！！！

【讨论】：

考虑向 Chrome 发送错误报告。