Threejs / WebGL экспорт холста как изображение размера - PullRequest
Новая
       19

Threejs / WebGL экспорт холста как изображение размера

0 голосов
/ 30 мая 2018

У меня есть холст, на котором пользователь может рисовать, и я пытаюсь экспортировать холст как изображение (или прочитать необработанные данные) определенного размера.

Мой холст находится в портретном режиме (300x500),исходное исходное изображение 400х400.Когда я использую canvas.toDataURL или context.getPixel, мои результаты всегда 300x150, так как это значение по умолчанию для размера drawbuffer в webgl.Я пытался изменить эти значения, но безрезультатно.

Я использую three.js WebGLRenderer.

Есть ли способ экспортировать холст / рисунки в нужных размераха размер?

Вот короткая часть моего кода, иллюстрирующая проблему:

CSS: 

.canvas
{
    width: 300px;
    height: 500px;
    background-color: #352a87;
}

JS: 

var c1 = $("#mainCanvas").get(0);
renderer =THREE.WebGLRenderer({canvas: c1, preserveDrawingBuffer: true});
// adding scene and draw on the canvas {omitted}

//later
ar context = $('#mainCanvas').get(0).getContext('experimental-webgl');
var pixels = new Uint8Array(context.drawingBufferWidth * 
context.drawingBufferHeight * 4);
context.readPixels(
    0,
    0,
    context.drawingBufferWidth,
    context.drawingBufferHeight,
    context.RGBA,
    context.UNSIGNED_BYTE,
    pixels);

Проблема в том, чтоconext.drawingBufferWidth равен 300, а context.drawingBufferHeight равен 150 вместо 400x400, которые мне понадобятся.

Я знаю, что никогда не устанавливал 400x400, но я бы не знал, как / где лучше всего это сделатьсделай так.

...