確認の領収書として画像をダウンロードするためのアプリケーションがあります。ユーザーが申し込みフォームに記入し、[OK]をクリックすると、画像がダウンロードされます。これをオフラインアプリ（Phonegapフレームワーク）として実装します。
Javascriptを使用して動的画像ファイルを作成することは可能ですか？
これが私のコードです、
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="http://www.w3.org/2000/svg">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
'<h3>Header</h3><em>I</em> like ' +
'<span style="color:white; text-shadow:0 0 2px blue;">' +
'cheese</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svg = new Blob([data], {
type: 'image/svg+xml;charset=utf-8'
});
ここで生成されたblobはファイルリーダーと互換性がありません。次のコードを使用するとイメージbase64を取得できませんか？
var reader = new FileReader();
reader.onload = function() {
var dataURL = reader.result;
console.log(dataURL)
};
reader.readAsDataURL(svg);
私が望んでいたものとは正確ではありませんが、私の問題を解決できる1つの解決策を見つけました。
var canvas = document.getElementById('textCanvas');
var context = canvas.getContext('2d');
context.font = '25pt Calibri';
context.fillStyle = '#891313';
context.fillText('My Header', 46, 30);
context.fillText('Description text, contains long ....', 20, 50);
console.log(context.canvas.toDataURL()) //this is the base64 formate of image
基本的にここでは、1つのキャンバス画像を作成し、後で簡単にダウンロードできる画像に変換します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加