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

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,/, '' );

}

我正在使用此函数在本地服务器上存储用户输入的图像，但出现以下错误：

factory.js:1 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 提供的值不是类型 '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'getBase64Image @ factory.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 提供给我们 - 这意味着我们不会在此过程中转换/重新压缩图像。 保存为 png 不会放大 jpg，转换为 jpg 也不会丢失 png 细节。 由于我们不再使用画布来创建 URL，因此我们不再能够控制精确的 mime 类型。 因此，我们可能有一个 jpg、png 或 jpeg 文件 - 这只是意味着将|jpeg添加到正则表达式，因此我们也替换它的实例。

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

 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); }

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

Answer 2

问题是在chrome、fireFox中无法通过input获取文件路径，IE8在选择文件时可以获取。