Pertanyaan Bagaimana saya bisa mengubah gambar menggunakan CamanJS?


Saya punya banyak gambar, dan saya ingin memuatnya masing-masing menjadi satu <canvas> elemen di berbagai titik waktu dan kemudian memanipulasi mereka menggunakan CamanJS. Saya bisa mendapatkan gambar pertama muncul seperti ini:

Caman('#canvas-element', '/images/one.jpg');

Tapi kemudian ketika saya kemudian mencoba memperbarui elemen yang sama menggunakan kode berikut, itu tidak bekerja.

Caman('#canvas-element', '/images/two.jpg');

Apakah ada cara untuk mereset / membersihkan / menyiram kanvas dan memuat data gambar baru ke dalamnya, atau apakah saya benar-benar perlu membuat terpisah <canvas> elemen untuk setiap gambar yang ingin saya muat? Saya lebih memilih satu elemen karena saya tidak ingin memakan semua memori.


5
2018-02-22 20:51


asal


Jawaban:


Hapus atribut Caman (data-caman-id) dari elemen IMG atau CANVAS, ubah gambar, dan lalu buat ulang Caman.

document
  .querySelector('#view_image')
  .removeAttribute('data-camen-id');

const switch_img = '/to/dir/img.png';

Caman("#view_image", switch_img, function() {
  this.render();
});

10
2017-08-25 17:27



Berharap kode yang diikuti dapat membantu orang lain yang memiliki kebutuhan yang sama.

function loadImage(source) {
    var canvas = document.getElementById('image_id');
    var context = canvas.getContext('2d');
    var image = new Image();
    image.onload = function() {
        context.drawImage(image, 0, 0, 960, 600);
    };
    image.src = source;
}

function change_image(source) {
    loadImage(source);
    Caman('#image_id', source, function () {
        this.reloadCanvasData();
         this.exposure(-10);
         this.brightness(5);
        this.render();
    });
}

3
2017-09-05 08:10



Hanya memikirkan yang satu ini dengan banyak trial and error dan kemudian suatu momen ya!

Alih-alih membuat kanvas saya langsung di html saya, saya membuat sebuah wadah dan kemudian hanya melakukan hal berikut:

var retStr = "<canvas id=\"" + myName + "Canvas\"></canvas>";
document.getElementById('photoFilterCanvasContainer').innerHTML = retStr;

Caman("#" + myName + "Canvas", myUrl, function() {
    this.render();
});

Anda ingin id kanvas menjadi unik setiap kali Anda mengakses fungsi Caman dengan gambar baru.


1
2018-04-06 23:09