Question

我试图在Javascript中获取所选图像文件的Base64 / Data URL。用户基本上通过文件输入控件选择图像，并生成数据URL。但是，我收到了这个错误：

未捕获的TypeError：无法执行＆＃39; drawImage＆＃39;上＆＃39; CanvasRenderingContext2D＆＃39;：提供的值不是类型＆＃39;（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或 ImageBitmap）＆＃39;

HTML：

// cant compile  3.14 is double and double*something = double
float c = (3.1415926 * 0.2f) * 4294967296L;

// this is ok ( 3.14 is now float and not double.
float c = (3.1415926f * 0.2f) * 4294967296L;

使用Javascript：

<body>
    <form id="form1">
    <div>
        <input type="file" id="imageinput" onchange="testit(event)" />
        <canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>
    </div>
    </form>
</body>

为什么这段代码不起作用，伙计们？

Answer 1

您无法将网址中的图片直接绘制到画布上。你必须创建一个图像元素/对象来做到这一点。

var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
var img = new Image();
img.onload = function(){
    ctx.drawImage(img, 0, 0);

    alert(myCanvas.toDataURL('image/jpeg'));
};

img.src = URL.createObjectURL(event.target.files[0]);

在这里，我们创建了一个image对象，并将src设置为用户选择的图片网址。加载图像后，我们将其添加到画布中。

修改

这里还有一个问题。无论图像大小如何，由于静态画布的宽度和高度，您将始终获得300x300的图像裁剪数据。因此，我们可以在加载图像后动态地设置画布的宽度和高度。我们可以使用console.log()代替alert()，以便您可以在浏览器中打开并查看控制台中的图像。

myCanvas.width = img.width; myCanvas.height = img.height;

以下是最终代码：

var myCanvas = document.getElementById('mycanvas'); var ctx = myCanvas.getContext('2d'); var img = new Image(); img.onload = function(){ myCanvas.width = img.width; myCanvas.height = img.height; ctx.drawImage(img, 0, 0); console.log(myCanvas.toDataURL('image/jpeg')); }; img.src = URL.createObjectURL(event.target.files[0]);

这是小提琴（我已经使画布可见，以便您可以在画布中看到整个图像和宽度和高度的变化）：

<强>更新

正如@Kaiido所提到的，它将产生PNG图像，因为'image / jpg'不是mimetype。 'image / jpeg'是JPG和JPEG图像的mimetype。

更新小提琴：

http://jsfiddle.net/k7moorthi/r8soo95p/4/

Answer 2

您正在尝试将对象URL绘制到画布。你需要先在内存中创建一个图像

http://jsfiddle.net/zmtu6t6c/4/

var myImageUrl = URL.createObjectURL(event.target.files[0]);
var myImage = new Image();
myImage.src = myImageUrl;

myImage.onload = function(){

... then do the canvas stuff

}

html5-canvas：将Image文件转换为DataURL会抛出Uncaught TypeError

2 个答案: