javascript - 如何能够将图像转换为 base64 并避免同源策略

原文 标签 javascript html image base64

我正在尝试将图像(链接)转换为 base64 以便能够存储在浏览器端(IndexedDB)中,但我无法做到这一点,我几天来一直在寻找解决方案,但我没有我的问题的解决方案。

在这个很棒的代码中,我能够将图像从 Internet 转换为 Base64,但问题是由于同源策略,我无法对 Internet 上的其他图像执行此操作。

我将如何避免该问题,或者如果您知道将图像转换为 Base64 的任何其他解决方案,那将非常有帮助

function convertImgToBase64URL(url, callback, outputFormat){
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
    };
    img.src = url;
}
convertImgToBase64URL('http://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png', function(base64Img){
alert('it works');
      $('.output').find('img').attr('src', base64Img);  
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"> <img> </div>

最佳答案

转换为 base64 时,您可以在图像路径之前使用代理 URL ( https://cors-anywhere.herokuapp.com/ ) 以避免跨域问题

var getDataUri = function (targetUrl, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function () {
        var reader = new FileReader();
        reader.onloadend = function () {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    var proxyUrl = 'https://cors-anywhere.herokuapp.com/';
    xhr.open('GET', proxyUrl + targetUrl);
    xhr.responseType = 'blob';
    xhr.send();
};
getDataUri(path, function (base64) {
    // base64 availlable here
})

关于javascript - 如何能够将图像转换为 base64 并避免同源策略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29644474/

相关文章:

javascript - 在application.html.erb中添加js脚本

javascript - 设置点击字符串的值

javascript - 如何限制html数字输入(实时)中允许的数字数量?

javascript - 加载大量图像而不会结结巴巴的最佳方法。

javascript - Angular 2+ : Internet Explorer: Unable to get property 'call' of undefined or null reference

javascript - 等待执行所有.then(),然后触发单个函数。

android - 如何在 iOS 和 Android 上的 PhoneGap 的原生 Google map 应用程序中搜索文本字符串?

html - PhoneJS 与常规的backbonejs/HTML5 应用程序相比有哪些优势?

javascript - Javascript将节目图像限制为1个显示

c - 快速的服务器端图像生成库?