Как масштабировать imageData в холсте HTML? - PullRequest
Новая
       7

Как масштабировать imageData в холсте HTML?

30 голосов
/ 10 августа 2010

У меня есть холст на моей веб-странице;Я создаю новые данные изображения на этом холсте, а затем изменяю некоторые пиксели с помощью массива myImgData.data [].Теперь я хотел бы масштабировать это изображение и сделать его больше.Я пытался масштабировать контекст, но изображение остается маленьким.Можно ли сделать это?Спасибо

Ответы [ 5 ]

35 голосов
/ 10 августа 2010

Вы можете нарисовать imageData на новом холсте, масштабировать оригинальный холст, а затем нарисовать новый холст на оригинальном холсте.

Примерно так должно работать: 

var imageData = context.getImageData(0, 0, 100, 100);
var newCanvas = $("<canvas>")
    .attr("width", imageData.width)
    .attr("height", imageData.height)[0];

newCanvas.getContext("2d").putImageData(imageData, 0, 0);

context.scale(1.5, 1.5);
context.drawImage(newCanvas, 0, 0);

Вот демонстрация работы http://jsfiddle.net/Hm2xq/2/.

16 голосов
/ 04 февраля 2012

Мне нужно было сделать это без интерполяции, вызываемой методом putImageData (), поэтому я сделал это путем масштабирования данных изображения в новый объект ImageData с измененным размером.Я не могу думать ни о каком другом времени, когда я думал, что использование 5 вложенных циклов было хорошей идеей: 

function scaleImageData(imageData, scale) {
  var scaled = c.createImageData(imageData.width * scale, imageData.height * scale);

  for(var row = 0; row < imageData.height; row++) {
    for(var col = 0; col < imageData.width; col++) {
      var sourcePixel = [
        imageData.data[(row * imageData.width + col) * 4 + 0],
        imageData.data[(row * imageData.width + col) * 4 + 1],
        imageData.data[(row * imageData.width + col) * 4 + 2],
        imageData.data[(row * imageData.width + col) * 4 + 3]
      ];
      for(var y = 0; y < scale; y++) {
        var destRow = row * scale + y;
        for(var x = 0; x < scale; x++) {
          var destCol = col * scale + x;
          for(var i = 0; i < 4; i++) {
            scaled.data[(destRow * scaled.width + destCol) * 4 + i] =
              sourcePixel[i];
          }
        }
      }
    }
  }

  return scaled;
}

Я надеюсь, что хотя бы один другой программист сможет скопировать и вставить это в свой редактор, покабормотал: «Вот, но для милости Божьей иду я».

15 голосов
/ 08 декабря 2013

Я знаю, что это старая тема, но, поскольку такие люди могут найти ее полезной, я добавляю свою оптимизацию в код rodarmor: 

function scaleImageData(imageData, scale) {
    var scaled = ctx.createImageData(imageData.width * scale, imageData.height * scale);
    var subLine = ctx.createImageData(scale, 1).data
    for (var row = 0; row < imageData.height; row++) {
        for (var col = 0; col < imageData.width; col++) {
            var sourcePixel = imageData.data.subarray(
                (row * imageData.width + col) * 4,
                (row * imageData.width + col) * 4 + 4
            );
            for (var x = 0; x < scale; x++) subLine.set(sourcePixel, x*4)
            for (var y = 0; y < scale; y++) {
                var destRow = row * scale + y;
                var destCol = col * scale;
                scaled.data.set(subLine, (destRow * scaled.width + destCol) * 4)
            }
        }
    }

    return scaled;
}

Этот код использует меньше циклов и работает примерно в 30 раз быстрее. Например, при 100-кратном увеличении области 100 * 100 этот код занимает 250 мс, а другой - более 8 секунд.

13 голосов
/ 18 декабря 2012

Вы можете масштабировать холст, используя метод drawImage. 

context = canvas.getContext('2d');
context.drawImage( canvas, 0, 0, 2*canvas.width, 2*canvas.height );

При этом изображение будет увеличено вдвое и отобразит северо-западную часть изображения на холсте. Масштабирование достигается с помощью третьего и четвертого параметров метода drawImage, которые определяют результирующую ширину и высоту изображения.

См. Документы в MDN https://developer.mozilla.org/en-US/docs/DOM/CanvasRenderingContext2D#drawImage%28%29

2 голосов
/ 23 ноября 2016

@ Ответ Кастрохенджа работает, но, как указывает Мухаммед Умер, после этого он путает координаты мыши на оригинальном холсте.Если вы хотите сохранить возможность выполнять дополнительные масштабы (для обрезки и т. Д.), Вам необходимо использовать второй холст (для масштабирования), а затем извлечь данные изображения со второго холста и поместить их в исходный холст.Вот так: 

function scaleImageData(imageData, scale){
    var newCanvas = $("<canvas>")
      .attr("width", imageData.width)
      .attr("height", imageData.height)[0];

    newCanvas.getContext("2d").putImageData(imageData, 0, 0);

    // Second canvas, for scaling
    var scaleCanvas = $("<canvas>")
      .attr("width", canvas.width)
      .attr("height", canvas.height)[0];

    var scaleCtx = scaleCanvas.getContext("2d");

    scaleCtx.scale(scale, scale);
    scaleCtx.drawImage(newCanvas, 0, 0);

    var scaledImageData =  scaleCtx.getImageData(0, 0, scaleCanvas.width, scaleCanvas.height);

    return scaledImageData;
}
...