处理readAsDataURL（）返回的图像数据

Question

有没有办法操纵（使用）来自HTML5 FileReader函数readAsDataUrl（）的图像数据？

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

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

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

Answer 1

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

示例1：调整大小

以下是使用画布修改图像，然后将修改后的图像构建为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="" />

Answer 2

您可以将图像绘制到画布中，使用图像像素制作任何内容，执行任何其他绘制操作并将结果放入DOM图像对象。

// get canvas context
var ctx = canvas.getContext("2d");

// draw image into canvas
ctx.drawImage(img, 0, 0);

// get image data object
var imageData = ctx.getImageData(0, 0, width, height);

// get the pixels
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
    // manipulate image pixels
}

// put the pixels back onto canvas
ctx.putImageData(imageData, 0, 0);

// put canvas into image
img.src = canvas.toDataURL("image/png");

阅读以下文章，了解详细说明和示例代码：

Mastering images with HTML5 canvas – part 1（画布图像基础，灰度和照片滤镜）

Mastering images with HTML5 canvas – part 2（剪切，透明度和亮度效果）