Question

尝试将用户图像存储到服务器。这是非常新的，所以我开始环顾四周，找到了以下代码：

function getBase64Image( imgElem ) {

    let canvas = document.createElement( 'canvas' );
    canvas.width = imgElem.clientWidth;
    canvas.height = imgElem.clientHeight;

    let ctx = canvas.getContext( '2d' );
    ctx.drawImage(imgElem, 0, 0);

    let dataURL = canvas.toDataURL( 'image/png' );
    return dataURL.replace( /^data:image\/(png|jpg);base64,/, '' );

}

我正在使用此功能在我的本地服务器上存储用户输入的图像，但是我收到以下错误：

factories.js：1未捕获的TypeError：无法执行'drawImage' 'CanvasRenderingContext2D'：提供的值不是类型 '（HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或 ImageBitmap）'getBase64Image @ factories.js：1SubmitRecipe @ recipe-submission.js：1onclick @ submitrecipe：43

我使用type设置为file的输入标记抓取图像。这是我的代码：

HTML

<label>Image</label>
<span class='err-message' id='image-err'></span></br>
<input type="file" id='image'>

JS

function SubmitRecipe() {

    //sets the recipe object and its keys
    let recipe = { alias: null, description: null, category: null, instructions: null, image: null };

    let img = document.getElementById( 'image' );
    recipe.image = JSON.stringify( getBase64Image( img ) );

}

我认为问题与元素image是HTMLInputElement这一事实有关，而这不是drawImage所期望的。我根本不知道如何解决它。

感谢所有帮助。

Answer 1

您可以使用FileReader对象来执行此操作。真正干净的是它甚至可以首先将数据作为数据URL提供给我们 - 这意味着我们不会在此过程中转换/重新压缩图像。 jpg不会通过保存作为png来放大，也不会通过转换为jpg来丢失细节。由于我们不再使用画布来创建URL，因此我们无法再控制精确的mime类型。因此，我们可能有一个jpg，png或jpeg文件 - 这只是意味着将|jpeg添加到正则表达式中，所以我们也替换了它的实例。

您还可以收听文件输入的change事件。这样做可以让您检查文件的大小和类型，以确保它们可以接受。（有人可以使用文件输入选择100MB的文本文件）

＆＃13;

function byId(id){return document.getElementById(id)}
function newEl(tagName){return document.createElement(tagName)}

window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
	byId('goBtn').addEventListener('click', onBtnClicked, false);
}

function onBtnClicked(evt)
{
	let imgInput = byId('imageInput');
	let chosenFile = imgInput.files[0];
	let fr = new FileReader();
	fr.onload = function(evt)
				{
                    var img = newEl('img');
                    document.body.appendChild(img);
                    img.src = this.result;
      
					var dataURL = this.result.replace( /^data:image\/(png|jpg|jpeg);base64,/, '' );
					let recipe = { alias: null, description: null, category: null, instructions: null, image: JSON.stringify(dataURL) };
					console.log(recipe);
				};
	fr.readAsDataURL(chosenFile);
}

＆＃13;

<label>Image</label>
	<span class='err-message' id='image-err'></span></br>
	<input type="file" id='imageInput'>
	<button id='goBtn'>GO</button>

＆＃13;

Answer 2

问题是你无法通过chrome中的输入获取文件路径，fireFox，IE8可以在选择文件时获取它。

JavaScript：将用户输入的图像转换为base64时出错

2 个答案: