Как изменить источник изображения после дескриптора, не отображая другой на выводе холста (OpenCV.js)

Question

Я использую OpenCV.js в Ionic 3 для создания приложения для сканера.У меня есть файл .ts с функцией поворота, как это:

rotateRight() {
let src = cv.imread('img');
let dst = new cv.Mat();
let dsize = new cv.Size(src.rows, src.cols);
let center = new cv.Point(src.cols / 2, src.rows / 2);
let M = cv.getRotationMatrix2D(center, -90, 1);
cv.warpAffine(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete(); M.delete();
}

И у меня есть такой код в файле .html с исходным кодом img, чтобы получить и холст для отображения нового изображения после обработки:

<img id="img" [src]="picture" *ngIf="picture" /> 
<canvas id="canvasOutput" ></canvas>

Моя проблема в том, что я просто хочу отобразить только одно изображение в моем файле .html. Я хочу, чтобы после обработки новое изображение отображалось в источнике img с самого начала, вместо того, чтобы отображать его как холст.

Есть ли способ сделать это?

Спасибо за помощь!

Answer 1

После запроса я нашел ответ самостоятельно.

Сначала получите элемент canvasOutput и img из HTML, затем измените источник изображения на canvasOutput с форматом base64:

var canvasOutput = document.getElementById('canvasOutput') as HTMLCanvasElement; 
let picture = document.getElementById("img") as HTMLImageElement;
picture.src = canvasOutput.toDataURL();

Last set 's стиль для видимости: скрытый, чтобы скрыть тег холста.