Question

我正在尝试将图片加载到HTML5 Canvas中。当我使用URL加载图像时一切正常，但如果我把图像放在本地驱动器上并指向它，没有任何反应。

注意：当我使用常规标签时，一切正常并且图像已加载。

这是代码：

  var canvas = document.getElementById("rightSide");
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "cloud.gif";
    context.drawImage(imageObj, 650, 55, 93, 104);

＆LT; canvas id =“rightSide”width =“800px”height =“800”＆gt;

感谢。

Answer 1

尝试这样的事情。

<canvas id="canvas"></canvas>

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

var img = new Image();
img.onload = function(){
    can.width = img.width;
    can.height = img.height;
    ctx.drawImage(img, 0, 0, img.width, img.height);
}
img.src = 'image.jpg';

Answer 2

加载到画布中的本地文件被视为来自不同的源，因此被“污染”。这就是为什么它不适用于您的本地文件，而是适用于URL。

html5图像未加载到画布中

2 个答案: