jQueryを使用して、画像をSVG形式でダウンロードしています。
さて、画像のすぐ上にタイトルを表示したいと思いました。キーアップイベントでこれを達成しようとしました。タイトルを書くと、スクリプトはそれを本来あるべきdivに追加しますが、ダウンロードボタンをクリックするとすぐにタイトルが消え、画像は追加されたタイトルなしでダウンロードされます。
上記のタイトルの画像をダウンロードしたかったのですが、実際にはテキストが追加されています。
html
<div class="row">
<div class="col-sm-6">
<label>Write Title</label>
<input type="text" name="qr_frame_text" id="qr_frame_text">
</div>
<div class="col-sm-6">
<div id="qr-container">
<div id="get_frame_text"></div> //Here I'm appending the title
<div id="img" class="qr-img">
<img src="data:image/png;base64, {!! base64_encode($image) !!}" class="img-fluid" />
</div>
</div>
</div>
JavaScript
$("#qr_frame_text").keyup(function () {
$("#get_frame_text").html(this.value);
});
$( document ).ready(function() {
domtoimage.toSvg(node)
.then(function (dataUrl) {
var node = document.getElementById("qr-container");
$('#qr2').click(function() {
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
var link = document.createElement('a');
link.download = 'qrcode.svg';
link.href = dataUrl;
link.click();
});
});
});
次のことを行ったdomtoimage.toSvg(node) 後に電話をかけています。
$('#qr-container').html("div id=\"get_frame_text\"></div>\n" +
"<div id=\"img\" class=\"qr-img\">\n" +
" <img src=\"data:image/png;base64, {!!base64_encode($image) !!}\" class=\"img-fluid\" />\n"+
"</div>\n");
var node = document.getElementById("qr-container");ノードのスナップショットを保存していないことを忘れないでください。変更すると変更されます。
保存する前に、要素を変更して入力を含まないようにします。変更をリセットしようとしている場合は、でそれを行います.then()。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加