yama-dev

js-canvas-downloader

Canvas Size -
Base Image -
Text Preview -

Options

変更は自動で `update()` に反映されます。JSON プレビューも現在の設定に同期します。

Base Canvas

source and composition

`none` を選ぶとベース画像なしモードになり、`width` と `height` を使って空キャンバスを生成します。

Text Layer

0.81.00
-180-10 deg
02 px
00.66
018 px
0.60.92

Image Layer

-180-14 deg

Export

format and file name
0.10.92

PNG では quality はほぼ影響せず、JPEG と WebP で圧縮品質として使われます。Revoke Delay は Blob URL を破棄するまでの待ち時間です。

Current Options

live JSON 

      

      


      

        

          

            
Install

            browser usage
          

          

            

              
Script Tag

              
<script src="./js-canvas-downloader.js"></script>

            

            

              
HTML

              
<div id="downloader"></div>

            

            

              
Initialize

              
var downloader = new CanvasDownloader({
  target: '#downloader',
  src: './base.png',
  text: [],
  image: []
});

            

          

        

      


      

        

          

            
API

            export methods
          

          

            

              
download(options)

              
Blob URL を優先して画像を保存します。`revokeDelay` で URL の破棄タイミングを調整できます。

              
downloader.download({
  fileName: 'image.png',
  mimeType: 'image/png',
  revokeDelay: 30000
});

            

            

              
createObjectURL(options)

              
Blob URL を返します。プレビュー表示や独自の保存導線を作る場合に使います。

              
var url = await downloader.createObjectURL({
  mimeType: 'image/png'
});

            

            

              
getBlob(options)

              
Canvas の Blob を Promise で返します。Web Share API などへ渡す用途に向いています。

              
var blob = await downloader.getBlob({
  mimeType: 'image/jpeg',
  quality: 0.9
});

            

            

              
getDataURL(options)

              
Data URL を返します。既存互換や小さな画像の即時利用向けです。

              
var dataUrl = downloader.getDataURL({
  mimeType: 'image/png'
});