Din*_*uka 7 html javascript canvas html5-canvas
我正在尝试在Javascript中获取所选图像文件的Base64/Data URL.用户基本上通过文件输入控件选择图像,并生成数据URL.但是,我收到此错误:
未捕获的TypeError:无法在'CanvasRenderingContext2D'上执行'drawImage':提供的值不是'(HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap)'
HTML:
<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>
使用Javascript:
function testit(event) {
var myImage = URL.createObjectURL(event.target.files[0]);
var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
ctx.drawImage(myImage, 0, 0);
var mydataURL = myCanvas.toDataURL('image/jpg');
alert(mydataURL);
}
为什么这段代码不起作用,伙计们？
您无法将URL中的图像直接绘制到画布上.您必须创建一个图像元素/对象来执行此操作.
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为用户选择的图像URL.加载图像后,我们将其添加到画布.
编辑:
这里我们还有一个问题.无论图像大小如何,由于静态画布的宽度和高度,您将始终获得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/
您正在尝试将对象 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
}
| 归档时间： |
|
| 查看次数： |
17770 次 |
| 最近记录： |