美文网首页
图片转成base64 跨域等安全限制及解决方案

图片转成base64 跨域等安全限制及解决方案

作者: 东方飞鱼 | 来源:发表于2019-02-20 09:53 被阅读0次

远程图片转成base64,网上一搜,基本都是说用canvas的toDataURL()来实现,实际上这会遇到跨域安全限制。目前,唯一可行的方案是,把图片文件以arraybuffer的形式ajax下载下来,然后直接转base4。但是,这样有个毛病,就是可能会浪费带宽,多下载一次。

var getBase64ByUrl = function(src, callback, outputFormat) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', src, true);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function(e) {
        if (xhr.status == 200) {
          var uInt8Array = new Uint8Array(xhr.response);
          var i = uInt8Array.length;
          var binaryString = new Array(i);
          while (i--) {
            binaryString[i] = String.fromCharCode(uInt8Array[i]);
          }
          var data = binaryString.join('');
          var base64 = window.btoa(data);
          var dataUrl = "data:" + (outputFormat || "image/png") + ";base64," + base64;
          alert(dataUrl)
          callback.call(this, dataUrl);
        }
      };
      xhr.send();
    }

原文:https://www.cnblogs.com/youryida/p/4914503.html
参考:http://stackoverflow.com/questions/22783368/android-browser-only-canvas-todataurl-throws-uncaught-error-securityerror-dom

相关文章

  • 图片转成base64 跨域等安全限制及解决方案

    远程图片转成base64,网上一搜,基本都是说用canvas的toDataURL()来实现,实际上这会遇到跨域安全...

  • 常见跨域解决方案

    目前常见的跨域解决方案 Jsonp最早的解决方案,利用script标签可以跨域的原理实现限制: 需要服务的支持 只...

  • JWT简记

    JSON Web Token(JWT)是目前最流行的跨域认证解决方案。 跨域认证问题及传统解决方案 传统认证流程 ...

  • 通过script标签实现跨域

    跨域 什么是跨域? 跨域问题是由于javascript语言安全限制中的同源策略造成的。同源策略是由Netscape...

  • 跨域分析

    浏览器为什么会产生跨域访问安全问题 浏览器的限制 浏览器为了安全考虑会限制不同域下的请求资源访问. 跨域的简单请求...

  • mina框架

    双向通信,可以考虑直接用socket 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,

  • 跨域的知识总结

    跨域的知识总结 表现 XMLHttpRequest、Fetch API等限制了不同域之间的数据调用。 原因 跨域的...

  • 跨域的解决方案

    跨域的解决方案script,img,link,iframe,不存在跨域请求限制。1、JSONP, 客户端向服务器发...

  • ajax跨域完全讲解

    产生跨域原因 浏览器限制 跨域(协议、主机名、端口号等不同就属于跨域) XHR(XMLHttpRequest)请求...

  • canvas 图片跨域(二)

    在canvas图片跨域(一)中,关于canvas跨域问题进行处理,提供的方法是后端提供base64文件资源,既把o...

网友评论

      本文标题:图片转成base64 跨域等安全限制及解决方案

      本文链接:https://www.haomeiwen.com/subject/acjcyqtx.html