HTML5 Изменение размера холста на Chrome & easeljs

Question

Я изо всех сил стараюсь сделать гладкое изображение измененным в холсте в Chrome. В firefox это работает хорошо, но в Chrome я застрял на том, чтобы сделать его гладким.

здесь является jsfiddle http://jsfiddle.net/flashmandv/oxtrypmy/

var AVATAR_SIZE = 100; 
var WHITE_BORDER_SIZE = 3; 

var stage = new createjs.Stage("canvas"); 
var avCont = new createjs.Container(); 
stage.addChild(avCont); 
avCont.x = avCont.y = 20; 
//add white circle 
var whiteBorderCircle = new createjs.Shape(); 
var radius = (AVATAR_SIZE+WHITE_BORDER_SIZE*2)/2; 
whiteBorderCircle.graphics.beginFill("white").drawCircle(radius, radius, radius); 
avCont.addChild(whiteBorderCircle); 

//add avatar image mask 
var avatarMask = new createjs.Shape(); 
avatarMask.graphics.beginFill("red").drawCircle(AVATAR_SIZE/2+WHITE_BORDER_SIZE, AVATAR_SIZE/2+WHITE_BORDER_SIZE, AVATAR_SIZE/2); 

//add avatar image 
var image = new Image();  
image.onload = function(){  
    var bitmap = new createjs.Bitmap(image); 
    bitmap.mask = avatarMask; 
    var bounds = bitmap.getBounds(); 
    bitmap.scaleX = (AVATAR_SIZE+WHITE_BORDER_SIZE*2)/bounds.width; 
    bitmap.scaleY = (AVATAR_SIZE+WHITE_BORDER_SIZE*2)/bounds.height; 
    avCont.addChild(bitmap); 
    stage.update(); 
}; 
image.src = 'http://files.sharenator.com/sunflowers-s800x800-423444.jpg'; 

Обратите внимание на неровные изображение Пожалуйста, помогите

Answer 1

Это связано с тем, как отсечение работает в Chrome. Маски клипов довольно жестоки в Chrome, в то время как в Firefox вы получаете сглаживание по непрямым краям.

Вот доказательство правильности концепции для этого (запустите в Chrome и FF, чтобы увидеть разницу):
http://jsfiddle.net/r65fcqoy/

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

Одно использование композитного режима - использовать его для заполнения чего-либо внутри существующего чертежа на холсте.

• Мы сначала создать заполненный круг, который мы хотим вставить изображение внутри
• Изменения режима компа на источник в и рисовать изображения
• Тогда мы вернемся к обычному режиму Аккомпанемента и сделать внешнюю границу

Вот такой подход с использованием ванильного JavaScript, где вы можете контролировать, как вы соединяете вещи - возможно, это не то, что вам нужно, но есть действительно мало вариантов, если библиотека, как сказано, не поддерживает режим comp вместо отсечения:

var canvas = document.getElementById('canvas'), 
 
    ctx = canvas.getContext('2d'), 
 
    img = new Image, 
 
    x = 70, y =70; 
 

 
var AVATAR_SIZE = 100; 
 
var WHITE_BORDER_SIZE = 3; 
 
var radius = (AVATAR_SIZE+WHITE_BORDER_SIZE*2)/2; 
 

 
img.onload = function() { 
 
    
 
    // first draw the circle for the inner image: 
 
    ctx.arc(x, y, AVATAR_SIZE*0.5, 0 , 2*Math.PI); 
 
    ctx.fill(); 
 
    
 
    // now, change composite mode: 
 
    ctx.globalCompositeOperation = 'source-in'; 
 
    
 
    // draw image in top 
 
    ctx.drawImage(img, x-AVATAR_SIZE*0.5, y-AVATAR_SIZE*0.5, 
 
        AVATAR_SIZE, AVATAR_SIZE); 
 

 
    // change back composite mode to default: 
 
    ctx.globalCompositeOperation = 'source-over'; 
 

 
    // now draw border 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, radius + 5, 0, 2*Math.PI); 
 
    ctx.closePath(); 
 
    ctx.lineWidth = 10; 
 
    ctx.strokeStyle = '#ffa94e'; 
 
    ctx.stroke(); 
 
}; 
 
img.src = 'http://i.stack.imgur.com/PB8lN.jpg';

<canvas id=canvas width=500 height=180></canvas>

Answer 2

Другим решением этой проблемы было бы в OnLoad функцию, чтобы добавить другую форму выше маскированной изображение, чтобы просто покрыть неровные края обтравочной маски