HTML5 Canvas圖像在Chrome和easeljs上調整大小

我努力在Chrome中在畫布上調整大小來平滑圖像。在Firefox中，它運行良好，但在Chrome瀏覽器中我堅持讓它平滑。HTML5 Canvas圖像在Chrome和easeljs上調整大小

這裏是的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';

通知參差不齊的圖像請幫

來源

2014-10-31 Deyan Vitanov

正是由於如何在Chrome剪輯作品。在Chrome中，剪貼蒙版非常殘忍，而在Firefox中，您可以在非直線邊緣獲得抗鋸齒效果。

以下是此證明的概念（在Chrome上運行這一點，在FF看到的差異）：
http://jsfiddle.net/r65fcqoy/

來解決這個問題的唯一方法是使用複合模式來代替，該基本上意味着你需要重寫你的代碼，除非你使用的庫以某種方式支持這個。

複合模式的一種用法是使用它來填充畫布上現有繪圖內的任何東西。

我們會首先創建我們想要的圖像出現在實心圓圈內
更改補償模式源和拉伸圖像
然後我們回到正常補償模式，並繪製外邊框

下面是一個使用vanilla 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>

來源

2014-10-31 12:40:28 K3N

[** EaselJS版本使用'compositeOperation '和緩存來提高性能。**]（http://jsfiddle.net/gbuuzxdk/4/） – 2014-10-31 14:04:07

**糟糕**我忘了提及你需要使用'arc.graphics.clear（）;' 'arc.cache（...）;'之後 – 2014-10-31 14:19:40

該另一解決方案是在有載函數添加掩蔽圖像上方的另一形狀簡單地覆蓋所述剪輯蒙版的鋸齒狀邊緣

來源

2014-10-31 14:15:23

HTML5 Canvas圖像在Chrome和easeljs上調整大小

回答

相關問題