canvas和img在chrome中工作，但在Firefox中不工作

Question

我已經搜索了有關此問題的一些結果，但是沒有一個對我有用，因此我在這里發布以獲取一些幫助。 基本上我的問題是當我單擊“生成”按鈕時，我希望畫布中的圖像顯示在img元素中。 但是，圖像將顯示為chrome，但不會顯示為Firefox！ 下面是我的編碼...

<body onload="onLoad();">
  <canvas id="aimage">Your browser does not support the canvas tag.</canvas>
  <input type="button" value="Generate" onclick="genImage();" />
  <img id="cImg" name="cImg" src="${param.src}" />
 ...
</body>

還有javascript ...

var tcanvas;
var scanvas;
var tcontext;
var imageURL;

function onLoad() {
    tcanvas = document.getElementById("aimage");
    tcontext = tcanvas.getContext("2d");
    scanvas = document.getElementById("cImg");
    imageURL = "${param.src}";
    update();                
}

function update() {
    var image = new Image();
    image.onload = function () {
        if (image.width != tcanvas.width)
            tcanvas.width = image.width;
        if (image.height != tcanvas.height)
            tcanvas.height = image.height;
        tcontext.clearRect(0, 0, tcanvas.width, tcanvas.height);
        tcontext.drawImage(image, 0, 0, tcanvas.width, tcanvas.height);
    }
    image.crossOrigin = 'anon';
    image.src = imageURL;
}

function genImage() {
    var url = tcanvas.toDataURL("image/jpeg");
    scanvas.crossOrigin = 'anon';
    scanvas.src = url;

    if(scanvas.width > 1000){
      scanvas.width = 1000;
    }
    if(scanvas.height > 1000){
      scanvas.height = 1000;
    }
}

Answer 1

嘗試這個：

var scanvas, tcontext, tcanvas;
function genImage() {
    var url = tcanvas.toDataURL("image/jpeg");
    scanvas.src = url;
    if (scanvas.width > 1000) {
        scanvas.width = 1000;
    }
    if (scanvas.height > 1000) {
        scanvas.height = 1000;
    }
}
window.onload = function () {
    tcanvas = document.getElementById("aimage");
    tcontext = tcanvas.getContext("2d");
    scanvas = document.getElementById('cImg');
    var img = new Image();
    img.onload = function () {
        tcontext.drawImage(img, 0, 0, img.width, img.height)
    };
    img.src = "yourImage.jpg";
}

canvas和img在chrome中工作，但在Firefox中不工作

問題描述

1 個解決方案

解決方案1
1 2013-10-18 05:25:56

canvas和img在chrome中工作，但在Firefox中不工作

問題描述

1 個解決方案

解決方案1 1 2013-10-18 05:25:56

解決方案1
1 2013-10-18 05:25:56