LEADTOOLS ナレッジベース

画像を保存する方法

エディション

全エディション

 

コンポーネントの種類

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人中0人がこの記事が役に立ったと言っています

0 コメント

記事コメントは受け付けていません。