从画布创建图像导致在Firefox中的空白图像

好吧，我发现问题是什么。每次你说新的Image（）你都必须使用onload处理器来确保图像真正加载。即使你通过toDataURL分配了src属性。从画布创建图像导致在Firefox中的空白图像

我想获得给定图像的子图像。在Google Chrome中输入console.log(createSubImg(img, 0, 0, 20, 20)); 我可以看到图像。在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; 
}

来源

2015-06-29 OOPDeveloper89

嗨，什么是在'img'变量？ – bbosternak

你好。这是一个html图像元素。 – OOPDeveloper89

根据您的评论编辑我的答案 – bbosternak

它的工作对我来说是这样的：

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));它也能工作。

来源

2015-06-29 10:30:05 bbosternak

下面是解

<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>

来源

2015-06-29 12:04:46 Sreejith

从画布创建图像导致在Firefox中的空白图像

回答

相关问题