javascript - 处理从 readAsDataURL() 返回的图像数据

Question

有没有一种方法可以操纵(处理)来自 HTML5 FileReader 函数 readAsDataUrl() 的图像数据？

我感兴趣的是加载图像并仅显示它的一部分。我可以只剪切数据字符串并且它可以工作，但我在控制台中收到错误消息，图像已被 chop 。

我想我必须知道数据结构。我想会有标题和图像数据，只是不知道如何计算什么是什么然后计算图像数据中的像素。

有可能吗？我应该使用 canvas 而不是只在 JS 中尝试吗？

Answer 1

正如我在评论中所说， Canvas 可能是最简单、最自然的方式。

示例 1:调整大小

这是一个使用 Canvas 修改图像，然后将修改后的图像构建为 HTML img 元素的简单示例:

function init() {
  var img = document.getElementById('orig');
  var mod = document.getElementById('mod');
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  
  canvas.width = canvas.height = 64;
  context.drawImage(img, 0,0, 256, 256, 0, 0, 64, 64);
  
  mod.src = canvas.toDataURL();
  
}

<p>Original Image</p>
<img id="orig" src="https://lh3.googleusercontent.com/-kUKEPU5ZpLw/AAAAAAAAAAI/AAAAAAAAABI/oVLnH7VD59A/photo.jpg" onload="init()" crossOrigin="anonymous" />
<p>Canvas Image</p>
<canvas id="c"></canvas>
<p>Modified Image</p>
<img id="mod" src="" />

这只会调整图像的大小，但您可以做任何您喜欢的事情，即使是在像素级别。

---

示例 2:裁剪

这是裁剪图像的另一个例子:

function init() {
  var img = document.getElementById('orig');
  var mod = document.getElementById('mod');
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');
  
  canvas.width = canvas.height = 64;
  context.drawImage(img, 64,64, 64, 64, 0, 0, 64, 64);
  
  mod.src = canvas.toDataURL();
  
}

<p>Original Image</p>
<img id="orig" src="https://lh3.googleusercontent.com/-kUKEPU5ZpLw/AAAAAAAAAAI/AAAAAAAAABI/oVLnH7VD59A/photo.jpg" onload="init()" crossOrigin="anonymous" />
<p>Canvas Image</p>
<canvas id="c"></canvas>
<p>Modified Image</p>
<img id="mod" src="" />

---

示例 3:像素级修改

让我们杀掉红色:

function init() {
  var img = document.getElementById('orig');
  var mod = document.getElementById('mod');
  var canvas = document.getElementById('c');
  var context = canvas.getContext('2d');

  canvas.width = canvas.height = 64;
  context.drawImage(img, 0, 0, 256, 256, 0, 0, 64, 64);

  var imageData = context.getImageData(0, 0, 64, 64);
  var data = imageData.data;

  for (var i = 0, n = data.length; i < n; i += 4) {
    data[i] = 0;
  }
  
  context.putImageData(imageData, 0, 0);

  mod.src = canvas.toDataURL();

}

<p>Original Image</p>
<img id="orig" src="https://lh3.googleusercontent.com/-kUKEPU5ZpLw/AAAAAAAAAAI/AAAAAAAAABI/oVLnH7VD59A/photo.jpg" onload="init()" crossOrigin="anonymous" />
<p>Canvas Image</p>
<canvas id="c"></canvas>
<p>Modified Image</p>
<img id="mod" src="" />