新しい画像を作成せずに画像を編集する

Question

JavaScript（img要素）を編集しようとしていますが、Googleでは希望の変更を加えて新しい画像を作成する方法についてのみ情報を提供しています。
パフォーマンス上の理由から、新しいイメージを作成せずに既存のイメージを編集することができれば嬉しいです。ブラウザ環境でJavaScriptを使用すれば可能ですか？

私が達成しようとしているのは、画像全体（パフォーマンス上の懸念事項）を常に再作成することなく、即座にthree.jsモデルのかなり大きなuvマップを編集することです。

Answer 1

画像を扱うためのクールなライブラリがあります：p5.js

その後、私はそれが直接HTMLで作成したimg要素を変更することができますわからないんだけど、それは問題ではない場合は、JSを使用してイメージをロードするためにこれはうまく動作します。

Hereピクセルの明るさを変更する方法の例：

var img; 

function preload() { 
    img = loadImage("image.png"); 
} 

function setup() { 
    createCanvas(720, 200); 
    img.loadPixels(); 
    loadPixels(); 
} 

function draw() { 
    for (var x = 0; x < img.width; x++) { 
    for (var y = 0; y < img.height; y++) { 
     // Calculate the 1D location from a 2D grid 
     var loc = (x + y*img.width)*4; 
     // Get the R,G,B values from image 
     var r,g,b; 
     r = img.pixels[loc]; 
     // Calculate an amount to change brightness based on proximity to the mouse 
     var maxdist = 50; 
     var d = dist(x, y, mouseX, mouseY); 
     var adjustbrightness = 255*(maxdist-d)/maxdist; 
     r += adjustbrightness; 
     // Constrain RGB to make sure they are within 0-255 color range 
     r = constrain(r, 0, 255); 
     // Make a new color and set pixel in the window 
     //color c = color(r, g, b); 
     var pixloc = (y*width + x)*4; 
     pixels[pixloc] = r; 
     pixels[pixloc+1] = r; 
     pixels[pixloc+2] = r; 
     pixels[pixloc+3] = 255; 
    } 
    } 
    updatePixels(); 
}