JS将图片转为base64

var getDataFromImg = function(img) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0 );
        var dataURL = canvas.toDataURL('image/png');

        return dataURL.replace(/^data:image\/(png|jpg);base64,/, '');
    }

    var images = document.querySelectorAll('.image');
    var finalArray = {};
    for ( var i=0; i<images.length; i++ )
    {
        //I just filled in array. Depending on what you're grabbing, you may want to fill
        //This with objects instead with text to identify each image.
        finalArray.push(getDataFromDiv(images[i]));
    }
    return finalArray;

https://stackoverflow.com/questions/30833290/fetching-images-with-javascriptresponse-in-cefbrowser-without-downloading-twice

转载于:https://www.cnblogs.com/huangcong/p/10225660.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将图片下载并转换为 base64 格式,可以使用 JavaScript 的 `XMLHttpRequest` 对象来下载图片,然后使用 `<canvas>` 元素将图片转换为 base64。 以下是一个示例,演示如何使用 JavaScript 下载图片并将其转换为 base64: ```javascript function downloadImageAndConvertToBase64(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { var reader = new FileReader(); reader.onloadend = function() { callback(reader.result); }; reader.readAsDataURL(xhr.response); } }; xhr.send(); } var imageUrl = '/path/to/image.jpg'; downloadImageAndConvertToBase64(imageUrl, function(base64Image) { console.log(base64Image); // 在这里处理 base64 图像数据 }); ``` 在上面的示例中,我们定义了一个函数 `downloadImageAndConvertToBase64()`,它接受两个参数:图像的 URL 和一个回调函数。在函数内部,我们创建了一个 `XMLHttpRequest` 对象,并设置其 `responseType` 属性为 `'blob'`,以便获取图像的二进制数据。 然后,我们使用 `XMLHttpRequest` 对象发送 GET 请求来下载图像。当请求成功完成时,我们使用 `FileReader` 对象将图像数据转换为 base64 格式,并将结果传递给回调函数。 最后,我们指定了图像的 URL,并调用 `downloadImageAndConvertToBase64()` 函数,将图像下载并转换为 base64。 请注意,由于涉及跨域请求,需要确保服务器允许跨域访问图像。另外,请确保替换示例中的图像 URL 为你自己的实际 URL。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值