如何从画布上加载的切片图像中获取图像？答案

【问题标题】：How to get image from slice image loaded on canvas?如何从画布上加载的切片图像中获取图像？
【发布时间】：2013-02-08 09:26:29
【问题描述】：

我有下一个切片图像的代码。我有下一个 HTML 代码

<img id="imagen" src="original.png" >
<canvas id="myCanvas" width="150" height="600"></canvas>

jQuery 代码

$(document).ready(function() {
   var image = document.getElementById('imagen');
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');

   image.onload = function() {
      ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
   };

   var i = canvas.toDataURL('image/jpeg');
   console.log( i );
});

现在，当我尝试获取存储在 canvas 变量中的切片部分时，当我检查 i 时，我得到一个黑色图像。有人可以告诉我为什么会发生这种情况以及如何解决它？谢谢。

【问题讨论】：

标签： javascript jquery image html canvas

【解决方案1】：

你必须先在画布上绘制，然后才能将画布上的绘图作为图像，以确保画布在画布被绘制到之后才能获得图像

image.onload = function() {
   ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height);
   var i = canvas.toDataURL('image/jpeg');
   console.log( i );
};

【讨论】：

很好，但我需要在该函数之外使用i var，我该怎么做？
@Jeff：从onload 回调中去掉var。通过在i 后面加上var，您可以创建一个new i，它只对回调是本地的。如果没有var，您将在更高范围之外使用i。
@Blender 你是在告诉我var i = image.onload = function.... 之类的东西，并且在函数内部创建一个return？我不明白你 100% 的回答。
@Jeff：抱歉，用语言解释起来有点困难。只需使用i = canvas... 而不是var i = canvas...。
@Blender 我做了类似的东西var i; image.onload = function() { ctx.drawImage(image, 0, 0, 50, image.height, 0, 0, 50, image.height); i = canvas.toDataURL('image/jpeg'); }; console.log( i ); 但我得到了undefined