如何使用CamanJS更改图像？ [英] How can I change out an image using CamanJS?

问题描述

我有多张图片，我想在不同的时间点将它们分别加载到一个< canvas> 元素中，然后使用它们进行操作 CamanJS 。我可以得到第一张图像：

I've got multiple images, and I'd like to load them each into a single <canvas> element at different points in time and then manipulate them using CamanJS. I can get the first image to appear like this:

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

但是当我随后尝试使用以下代码更新相同的元素时，它不起作用。

But then when I subsequently try to update that same element using the following code, it does not work.

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

有没有办法重置/清除/刷新画布并将新图像数据加载到画布中，或者我真的需要为每个要加载的图像创建单独的< canvas> 元素吗？我更喜欢单个元素因为我不想占用所有内存。

Is there some way to reset/clear/flush the canvas and load new image data into it, or do I really need to create separate <canvas> elements for each image I want to load? I'd prefer a single element because I don't want to eat up all the memory.

推荐答案

删除Caman属性（来自IMG或CANVAS元素的data-caman-id），更改图像，然后重新渲染Caman。

Remove the Caman attribute (data-caman-id) from the IMG or CANVAS element, change the image, and then re-render Caman.

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

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

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

这篇关于如何使用CamanJS更改图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！