我需要将我的图像转换为Base64字符串,这样我就可以将我的图像发送到服务器。

有JavaScript文件吗?否则,我如何转换它?


当前回答

试试下面的代码:

对于文件上传更改事件,调用这个函数:

$("#fileproof").on('change', function () {
    readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {
        var fr = new FileReader();
        fr.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL(files[0]);
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

存储Base64数据在隐藏的字段使用。

其他回答

您可以使用FileAPI,但它几乎不受支持。

我最终使用了一个返回Promise的函数。

const getImg64 = async() => { const convertImgToBase64URL = (url) => { console.log(url) return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'Anonymous'; img.onload = () => { let canvas = document.createElement('CANVAS') const ctx = canvas.getContext('2d') canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); const dataURL = canvas.toDataURL(); canvas = null; resolve(dataURL) } img.src = url; }) } //for the demonstration purposes I used proxy server to avoid cross origin error const proxyUrl = 'https://cors-anywhere.herokuapp.com/' const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg') console.log(image) } getImg64()


你可以在任何异步函数中使用这种方法。然后,您只需等待转换后的图像并继续执行指示即可。

你也可以简单地提取以64为基数的URL的一部分:

var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part

这很简单。 只需调用函数并传递你的图像。 2>保存返回值并在任何需要的地方使用。

//call like this
const convertedFile = await imageToBase64(fileObj);
console.log("convertedFile",convertedFile);

//this is the required function

 async function  imageToBase64(image) {
 const reader = new FileReader();
 reader.readAsDataURL(image);
 const data= await new Promise((resolve, reject) => {

   reader.onload = () => resolve(reader.result);

   reader.onerror = error => reject(error);

  });
return data;
}

export default imageToBase64;

需要利用读取器将blob转换为base64,更喜欢使用async-await语法,所以我选择提取读取器逻辑到帮助器,像这样:

//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.readAsDataURL(blob)
  })
}

并在主代码中使用await调用它:

//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)