なでしこ1には画像半透明コピーという命令がありました。
なでしこ3には今のところ実装されていないようです。(なでしこ3.3.74)
じゃあ調べて作ってみましょう！
完成
//なでしこ3.3.74
！インデント構文
画像w＝200。画像h＝200。
[画像w,画像h]のキャンバス作成 //てきとう
「https://n3s.nadesi.com/image.php?f=8.jpg」を画像読んだ時には
対象の[0,0,画像w,画像h]を[0,0,画像w,画像h]へ画像部分描画。
128に画像半透明 //透明度50%
//不透明度 0～255
●画像半透明(alpで|alpに)
w = 描画中キャンバスの「幅」をDOM属性取得
h = 描画中キャンバスの「高」をDOM属性取得
imagedata=描画中コンテキストの「getImageData」を[0,0,w,h]でJSメソッド実行
data=imagedata["data"]
start = 0
end = (dataの要素数)-1
iをstartからendまで4ずつ増やし繰り返す
data[i+3]=alp
imagedata["data"] = data
描画中コンテキストの「putImageData」を[imagedata, 0, 0]でJSメソッド実行
序盤の解説
画像を半透明にする前に画像のロードが終わっていないといけません(1敗)。
キャンバスの作成、画像のロード(待ち)、キャンバスに元絵を描画、半透明処理、と進めていきます。
今回は画像読んだ時にはで処理を開始しています。
「https://n3s.nadesi.com/image.php?f=8.jpg」を画像読んだ時には
対象の[0,0,画像w,画像h]を[0,0,画像w,画像h]へ画像部分描画。
128に画像半透明 //透明度50%
●画像半透明(alpで|alpに)の解説
getImageDataする
imagedata=描画中コンテキストの「getImageData」を[0,0,w,h]でJSメソッド実行
↑画像から範囲指定してimageDataとかいうものを取り出します。
この部分に関しては、なでしこ3貯蔵庫にいいのがあったのでコピーしてきました。
imagedataをコンソール表示してみたところ…
imagedata["data"]が160000個の要素を持つ配列
imagedata["colorSpace"]が"srgb"形式であるらしい
imagedata["height"]が200
imagedata["widht"]が200
この160000の要素をもつdataは色のRGBAが順番に入っているそうです。
[R,G,B,A,R,G,B,A,R,G,B,A,……]
今回の作ったキャンバスは縦200×横200×RGBAで
200×200×4=160000要素ということです。
これを書き換えると色や透明度を変えられるようです。
不透明度を書き換える
RGBAのRGBは赤、緑、青。
のこりのAにあたる部分が不透明度なので、引数alpに書き換えて行きます。
data=imagedata["data"]
start = 0
end = (dataの要素数)-1
iをstartからendまで4ずつ増やし繰り返す
data[i+3]=alp
ループの書き方はいろいろあるかと思いますが、せっかくなので～ずつ増やし繰り返すを使ってみました。
data[i]はdata[0]からdata[159999]なので注意します(1敗)
putImageDataする
imagedata["data"] = data
描画中コンテキストの「putImageData」を[imagedata, 0, 0]でJSメソッド実行
dataを書き換えたらimagedataをキャンバスに戻します。
dataのほうを戻すとエラーとなります(1敗)
使用例
