Question

我现在调整图像大小的方法是将其粘贴到画布元素中，然后缩放画布的上下文。问题是，当我调整大量图像时，UI基本上会冻结。反正我是否可以将此调整大小步骤移至Web工作者？我遇到的问题是您无法使用document.createElement('canvas')或Image()这两个对此实施至关重要的功能。

Answer 1

是可能的。但是，由于画布在工作人员中不可用，因此您必须使用自己的/第三方代码来操作工作人员中的图像数据。

例如，您可以使用 https://github.com/nodeca/pica，如果支持Web工作者，它可以非常方便地在Web工作者中进行处理。

使用它来将图像从img元素调整为画布元素的粗略示例......

<button onclick="resize()">Resize</button>
<img id="original" src="my-image.jpg">
<canvas id="resized">

使用Javascript

function resize() {
  // Find the original image
  var originalImg = document.getElementById("original");

  // Create an empty canvas element of the same dimensions as the original
  var originalCanvas = document.createElement("canvas");
  originalCanvas.width = originalImg.width;
  originalCanvas.height = originalImg.height;

  // Copy the image contents to the canvas
  var ctx = originalCanvas.getContext("2d");
  ctx.drawImage(originalImg, 0, 0);

  // Set the target dimensions
  var resizedCanvas = document.getElementById("resized");
  resizedCanvas.width = originalCanvas.width / 2;
  resizedCanvas.height = originalCanvas.height / 2;

  // Resize (using web workers if supported)
  pica.resizeCanvas(originalCanvas, resizedCanvas, {}, function(err) {
    // Do something on finish/error
  }); 
}

可以在https://plnkr.co/edit/yPRjxqQkHryqeZKw4YIH?p=preview

看到

Answer 2

不幸的是，您无法使用集成的浏览器功能。相反，您需要获取像素数据：

var data = ctx.getImageData(0,0,canvas.width, canvas.height);

您需要将这些发送给工人。您可以使用阵列的传输模式：

worker.postMessage( {
                     name: "image_data",
                     data: data.data,
                     width: data.width,
                     height: data.height
                    },
                     [data.data] // this tells browser to transfer data to web worker
);

我从其他答案修改了函数，以便它可以使用图像数据数组缩放图像。这是非常有限的，因为比例只允许为整数 - 这意味着你不能缩小：https://jsfiddle.net/n3drn8v9/5/

我推荐googling some libraries for this，而不是重新发明轮子。

有没有办法使用Web worker调整图像客户端的大小？

2 个答案: