2016-12-23 7 views
0

私はfabricjsキャンバスを使って設計しています。 Javaスクリプトを使用して画像ファイルをダウンロードするダウンロード後に画像の境界線が見えません。ダウンロードした画像に枠がありません

コードサンプル:

<canvas id="c" runat="server" style="border:2px solid black;" ></canvas> 
<img alt="" src="" id="finalImge" runat="server" style="border:2px solid black;" /> 
function DownloadDesign() 
{ 
    var canvas = document.getElementById('c').fabric; 
    var img = document.getElementById('finalImge'); 
    img.src = canvas.toDataURL("image/png"); 
    var a = $("<a>").attr("href", img.src).attr("download", "Design.png").appendTo("body"); 
    a[0].click(); 
    a.remove(); 
} 
+0

キャンバスにボーダーを適用してからダウンロードしてみてください 例:canvas .style.border = '1px solid#000'; – pareshm

+0

私もそれを試しました..しかし、画像をダウンロードした後に境界がありません.. –

+0

@pareshm ..私はキャンバスに罫線を追加した後にこのエラーがあります。エラー:Uncaught TypeError:未定義の –

答えて

0

に境界線を追加する必要があり

あなたの境界がキャンバスではありませんが普通です。 http://jsfiddle.net/yvqmp1so/

var boundingBox = new fabric.Rect({ 
    fill: "transparent", 
    width: 590, 
    height: 590, 
    stroke: "red", 
    strokeWidth: 10, 
    selectable: false 
}); 
canvas.add(boundingBox); 
+0

@neopheus ...ありがとう..それは私のために働く.. –

0

それはあなたが国境をしたい場合、あなたは例えばキャンバス

+0

@ neopheusのプロパティ 'border'を設定できません。どうすればいいですか?私はfabricjsを使用しています –

関連する問題