我正在尝试将附加的图像转换为base64
。我试图这样做,但是出错了。
https://jsbin.com/lubosabore/edit?html,js,console,output
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
$(function(){
// alert()
$('#fileId').on('change', function (e) {
console.log('ddd');
var file = e.target.files[0];
console.log(getBase64Image(file))
})
})
我附加了一个png
值
它没有打印base64值
答案 0 :(得分:1)
运行此代码时,出现以下错误:
TypeError:无法在'CanvasRenderingContext2D'上执行'drawImage':提供的值不是'(CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas)'
因此,像e.target.files[0]
这样的File
object无效。我们需要先将其转换为HTMLImageElement
。 (another answer起)的操作方法如下:
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
现在您有一个HTMLImageElement
。但是,您确实不需要它,或者根本不需要canvas
:event.target.result
中的FileReader
已经是您想要的data:
URL。