文章/答案/技术大牛

发布

社区首页 >问答首页 >运动(HTML5画布)-缩放时平滑图像

问运动(HTML5画布)-缩放时平滑图像
EN

Stack Overflow用户

提问于 2014-04-14 11:23:02

回答 1查看 719关注 0票数 3

当我把大图片添加到我的页面上时，当我把它们设置成相当小的尺寸时，我会得到一些质量很差的图片。结果往往参差不齐/粗糙。然而，如果我添加相同的图像，并设置尺寸与img，我得到了一个更好的质量和顺利缩小版本。

我还能补充些什么来对付这事吗？jsfiddle，屏幕截图和下面的代码

JSFIDDLE: http://jsfiddle.net/vTLkn/6/

// Define Stage
var stage = new Kinetic.Stage({
    container: "canvas",
    width: 300,
    height: 200
});

//Define Layer for Images
var layer = new Kinetic.Layer();
stage.add(layer);   

// Draw Image Function
function drawImage(image,w,h,x,y) { 
    // Define Function's Image Properties
    var theImage = new Kinetic.Image({
        image: image,
        x: x,
        y: y,
        width: w,
        height: h
    });
    
    // Add Function's Image to Layer
    layer.add(theImage);
    layer.draw();
}
    
// Define Image 1 and Draw on Load
var image1 = new Image();
image1.onload = function() {
    drawImage( this, 250, 188, 0, 0);
};
image1.src = "http://i.imgbox.com/vMfjLbnw.jpg";

html

canvas

kineticjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-04-14 13:58:26

基于@Cryptoburner的评论。我在Kinetic中实现了一个自定义形状，并使用sceneFunc使用相关链接中实现的drawImage函数。

var theImage = new Kinetic.Shape({
    sceneFunc: function(context) {
        /// step 1
        var oc = document.createElement('canvas'),
            octx = oc.getContext('2d');
        oc.width = image.width * 0.5;
        oc.height = image.height * 0.5;
        octx.drawImage(image, 0,0, oc.width,oc.height);

        /// step 2
        octx.drawImage(oc,0,0,oc.width * 0.5,oc.height * 0.5);



        context.drawImage(oc,0,0,oc.width * 0.5, oc.height * 0.5,
                         0,0,w,h);
    }
});

这是小提琴：http://jsfiddle.net/vTLkn/8/

现在它仍然不如Img版本好，但它是和改进。由于您的图像是1000像素宽，这可能是一个好主意做另一次迭代缩小(在自定义sceneFunc。

PS。将Kinetic版本更新为5.0.1，否则就无法工作。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23058785

复制

相似问题

问运动(HTML5画布)-缩放时平滑图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问运动(HTML5画布)-缩放时平滑图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问运动(HTML5画布)-缩放时平滑图像
EN