Question

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

但是，当我使用createElement('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()

显示时，画布仅显示空白屏幕

尝试2：

在这个尝试中，我刚刚在onload()函数

中移动了img.src

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>

Ionic - drawImage（）不起作用

1 个答案: