离子 - drawImage() 不起作用

Question

如果 HTML 中定义了 <canvas>，则 drawImage 函数工作正常。请检查我的JSFiddle

但是，当我使用 createElement('canvas') 创建 canvas 时，它不起作用。

我试过通过以下方式将图像转换为canvas

尝试 1:

$scope.canvas = document.createElement('canvas');
$scope.canvas.width = 500;
$scope.canvas.height =1000;
var ctx = $scope.canvas.getContext('2d');

var img = new Image();
img.onload = function() {
     alert("image is loaded");
     ctx.drawImage(img, 0, 0);

 };
img.src="img/default_subject.png";

这样，当尝试使用 $scope.canvas.toDataURL()

显示时，canvas 仅显示空白屏幕

尝试2：

在这次尝试中，我刚刚将 img.src 移到 onload() 函数中

img.onload = function() {
img.src="img/default_subject.png";
ctx.drawImage(img, 0, 0);
};

这个试了也没用。

尝试 3: 在这次尝试中，我将 var img = new Image(); 更改为 var img = document.createElement('img')

$scope.canvas = document.createElement('canvas');
$scope.canvas.width = 500;
$scope.canvas.height =1000;
var ctx = $scope.canvas.getContext('2d');

var img = document.createElement('img');
img.onload = function() {
     alert("image is loaded");
     ctx.drawImage(img, 0, 0);

 };
img.src="img/default_subject.png";

但是，没有突破。

请帮我找到解决办法。

Answer 1

创建 canvas 元素后，您需要将 canvas 元素添加到文档中。我修改了您的 JSFiddle 示例以使用 JavaScript 创建 canvas 元素。

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height =1000;
document.getElementById("canvasContainer").appendChild(canvas);
var ctx = canvas.getContext('2d');
var img = document.createElement('img');
img.onload = function() {
     alert("image is loaded");
     ctx.drawImage(img, 0, 0);
};
img.src="http://www.download-free-wallpaper.com/img88/xpwwiirymrkfcacywpax.jpg";

<div id="canvasContainer"></div>

离子 - drawImage() 不起作用

Ionic - drawImage() does not work

canvas

drawimage

angularjs

cordova

ionic-framework