zoukankan      html  css  js  c++  java
  • 图片转成Base64

    var img = "imgurl";//imgurl 就是你的图片路径  
    
    function getBase64Image(img) {  
         var canvas = document.createElement("canvas");  
         canvas.width = img.width;  
         canvas.height = img.height;  
         var ctx = canvas.getContext("2d");  
         ctx.drawImage(img, 0, 0, img.width, img.height);  
         var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
         var dataURL = canvas.toDataURL("image/"+ext);  
         return dataURL;  
    }  
    
    var image = new Image();  
    image.src = img;
    img.setAttribute('crossOrigin', 'anonymous');
    image.onload = function(){ var base64 = getBase64Image(image); console.log(base64); } 

    Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    经过查阅和分析,发现这个其实是由于视频文件所在的域和图片和页面所在域不同,出现跨域传输的问题。

    解决方案1.

    如果想使用toDataURL()生成图片文件的话,在canvas绘图过程中使用的图片应该是当前域下的。

    解决方案2.

    访问的服务器允许,资源跨域使用,也就是说设置了CORS跨域配置,Access-Control-Allow-Origin

    然后在客户端访问图片资源的时候

    
    img.setAttribute('crossOrigin', 'anonymous');
    
  • 相关阅读:
    抽象工厂模式
    工厂方法模式
    简单工厂模式
    Zuul
    Turbine
    Hystrix
    Feign
    Ribbon
    Eureka
    @MappedSuperclass的作用
  • 原文地址:https://www.cnblogs.com/qiu-Ann/p/10638346.html
Copyright © 2011-2022 走看看