2

キャンバスをファイルに保存する方法を見つけようとしています。画像が大きすぎて dataToUrl を使用できないため、さまざまな toblob メソッドを試しています。パターン化された塗りつぶしを使用すると、toblob が機能しないようです。これが機能する可能性がある場合、またはこれを達成する別の方法がある場合、誰かが私にできるでしょうか? ありがとう

jfiddle の例

<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

<script src="jquery.min.js"></script>
<script src="canvas-to-blob.js"/></script>
<script src="FileSaver.js-master\FileSaver.js"></script>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
var img = new Image();
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);

//Works with color, but not with pattern
ctx.fillStyle = pat;
//ctx.fillStyle = 'blue';

ctx.fill();

try {
    var isFileSaverSupported = !! new Blob();
} catch (e) {
    alert(e);
}
alert("toBlob");
c.toBlob(function (blob) {
    alert("success");
    saveAs(blob, "TruVue.png");
});
</script>
</html>
4

1 に答える 1

3

理由はCORSによるもので、他のドメインからの画像は制限されています。キャンバスに表示することはできますが、ビットマップを抽出することはできません。

または、toBlobこれらの画像を使用することはできません。toDataURLgetImageData

いくつかの回避策があります。

  • 画像を独自のサーバーにアップロードし、そこから読み込みます (ページに使用するのと同じドメイン)。
  • 他のサーバーを変更してAccess-Control-Allow-Originヘッダーを含めます (この場合、おそらく実行できません)。
  • 独自のサーバーをイメージ プロキシとして使用する

ところで：画像onloadを使用する前に、画像が適切にロードされるように、画像のイベントも使用する必要があります。

var img = new Image();
img.onload = drawFunction;
img.src = "http://www.w3schools.com/tags/img_lamp.jpg";

function drawFunction() {
    /// draw here
}
于 2013-07-25T20:50:30.497 に答える