画像を保存する方法

エディション

全エディション

コンポーネントの種類

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では、ドキュメントコンバーターの機能によりエクスポートすることは可能です。
詳細については、下記のオンラインヘルプをご参照ください。

LEADTOOLS ナレッジベース

0 コメント