Question

好的，我发现了问题所在。每当你说新的Image（）时，你必须使用onload处理程序来确保图像真正加载。即使您通过toDataURL分配src attr。

我想获得给定图像的子图像。在我输入console.log(createSubImg(img, 0, 0, 20, 20));时在Google Chrome中我可以看到图像。在Firefox中，我看到一个空图像。我错了什么？

我的方法如下：

function createSubImg(img, x, y, width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(
            img,
            x * width,
            y * height,
            width,
            height,
            0,
            0,
            width,
            height);


    var result = new Image();
    result.src = canvas.toDataURL();
    return result;
}

Answer 1

这对我有用：

var img;
(function(){
    img = document.getElementById('example');
    img.onload = function(){
         console.log(createSubImg(img, 0, 0, 20, 20));
    };
});

如果我在Firefox中编写console.log(createSubImg(img, 0, 0, 20, 20));，它也可以。

Answer 2

这是解决方案

<body>
<form id="form1" runat="server" style="position: relative;">
    <img id="scream" width="220" height="277" src="Images/01.jpg" alt="The Scream" />

    <img id="test" src="#" />
</form>

脚本部分在这里

 <script type="text/javascript">
    $(function () {
        var canvas = document.createElement('canvas');
        var img = document.getElementById("scream");
        var ctx = canvas.getContext("2d");
        var res = createSubImg(img, 0, 0, 200, 200, canvas, ctx);
        var myImage = $("#test");
        myImage.attr('src', res.src);
    });

    function createSubImg(img, x, y, width, height, canvas, ctx) {
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(
                    img,
                    x * width,
                    y * height,
                    width,
                    height,
                    0,
                    0,
                    width,
                    height);

        var result = new Image();
        result.src = canvas.toDataURL();
        return result;
    }
</script>

从画布创建图像会在firefox中生成空白图像

2 个答案: