3

Слева размытое изображение на канвасе, справа исходное изображение, надо что бы было с пикселями, а оно размывает, не знаю как бороться.

        c=skinImage.width/64;
        var canvas = document.createElement('canvas');
        canvas.width = 256;// * scale;
        canvas.height = 256;// * scale;
        //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*c,  8*c,  8*c, 8*c,  4*s,  0*s,  8*s, 8*s);
        //draw the mask
        context.drawImage(skinImage, 40*c,  8*c,  8*c, 8*c,  4*s,  0*s,  8*s, 8*s);
        //draw the body
        context.drawImage(skinImage, 20*c, 20*c, 8*c, 12*c, 4*s,  8*s,  8*s, 12*s);
        //draw the left leg
        context.drawImage(skinImage, 4*c,  20*c, 4*c, 12*c, 4*s,  20*s, 4*s, 12*s);
        //draw the right leg
        context.drawImage(skinImage, 4*c,  20*c, 4*c, 12*c, 8*s,  20*s, 4*s, 12*s);
        //draw the left arm
        context.drawImage(skinImage, 44*c, 20*c, 4*c, 12*c, 0*s,  8*s,  4*s, 12*s);
        //draw the right arm
        context.drawImage(skinImage, 44*c, 20*c, 4*c, 12*c, 12*s, 8*s,  4*s, 12*s);
        //draw down leftleg
        context.drawImage(skinImage, 20*c,  52*c,  4*c, 12*c,  4*s,  20*s, 4*s, 12*s);
        //draw down lefthand
        context.drawImage(skinImage, 36*c,  52*c,  4*c, 12*c,  0*s,  8*s,  4*s, 12*s);

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

Использую такой код, s-это во сколько раз должно увеличиться, оно увеличивается, но в результате оно размывается вместо того что бы нормально отобразиться, я не знаю что делать подскажите.

5

1 ответ 1

2

При помощи установки свойства context.imageSmoothingEnabled в false. Кроссбраузерная установка:

ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

comparasion

Рабочий пример на Plunker

Страница на MDN

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.