エディション
全エディション
コンポーネントの種類
JavaScript
コントロール
ImageViewer/DocumentViewer
詳細
【Proファミリー】
ImageViewerには、画像の保存機能はありません。ブラウザの機能により保存するか、JavaScriptのCanvasオブジェクトなどを使用して保存する方法をご検討ください。
◆ブラウザの機能で保存する方法
window.openによってImageViewerに表示した画像をブラウザに表示します。
ブラウザの機能の「名前を付けて保存」から保存できます。
サンプルコード(HTML)
<button id="img_window_open">保存</button>
サンプルコード(JavaScript)
document.getElementById('img_window_open').addEventListener('click', function(){
window.open(imageViewer.imageUrl, "_blank");
});
◆Canvasオブジェクトを使用する方法
この方法では、画像をダウンロードして保存します。
サンプルコード(HTML)
<button id="img_download">ダウンロード</button>
サンプルコード(JavaScript)
document.getElementById('img_download').addEventListener('click', function(){
var image = new Image();
image.crossOrigin = "anonymous";
image.src = imageViewer.imageUrl;
document.body.append(image);
image.onload = () => {
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
var blob;
blob = canvas.toDataURL("image/jpeg");
var a = document.createElement("a");
a.href = blob;
a.download = "output.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
document.body.removeChild(image);
});
オンラインヘルプのチュートリアル(Display Images in an Image Viewer - HTML5 JavaScript)についてもご参照ください。
【Documentファミリー】
DocumentViewerでは、ドキュメントコンバーターの機能によりエクスポートすることは可能です。
詳細については、下記のオンラインヘルプをご参照ください。
0 コメント