vue 图片转base64本地路径跨域方式

 更新时间:2022年02月09日 11:10:20   作者:絮落锦乡  
这篇文章主要介绍了vue 图片转base64本地路径跨域方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

图片转base64本地路径跨域

问题描述

代码

getUrlBase64(url, ext, callback) {
                    var canvas = document.createElement("canvas");   //创建canvas DOM元素
                var ctx = canvas.getContext("2d");
                var img = new Image;
                img.crossOrigin = 'Anonymous';//外网访问必须加否则会报错
                img.src = url;
                img.onload = function () {
                    canvas.height = 140; //指定画板的高度,自定义
                    canvas.width = 120; //指定画板的宽度,自定义
                    ctx.drawImage(img, 0, 0, 140, 120); //参数可自定义 高度,宽度
                    var dataURL = canvas.toDataURL("image/" + ext);
                    callback.call(this, dataURL); //回掉函数获取Base64编码
                    canvas = null;
                }; 
            },

解决方案

1、采用nginx 进行监听端口进行转发

resPre:'http://localhost:8083/fileApi'
server{
        listen       8083;
        server_name  localhost 192.168.0.13;
        root   "路径";
        # 该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。
        add_header 'Access-Control-Allow-Origin' '*';
        # 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。
        #  默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,
        #  Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,
        #  如果服务器不要浏览器发送Cookie,删除该字段即可
        add_header 'Access-Control-Allow-Credentials' 'true';
        # 该字段是必须的,用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。
        add_header 'Access-Control-Allow-Methods' '*';
 
        #end 允许指定域名跨域访问,根据自己情况修改
        #ssl配置省略
         location / {
            rewrite  ^.+fileApi/?(.*)$ /$1 break;//fileApi 前缀
            proxy_pass  http://localhost:8085;    #node api server 即需要代理的IP地址
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         }        
    }

2、把图片放在项目目录下面,也就是同一个地址下面。 

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

把其他域的图片在canvas中转换为base64时,会遇到跨域安全限制。

目前,唯一可行的方案是,把图片文件以arraybuffer的形式ajax下载下来,然后直接转base4。

但是,这样有个毛病,就是可能会浪费带宽,多下载一次。

/*    var getBase64ByUrl = function(src, callback, outputFormat) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0); //默认图片文件的原始size 缩小base串需加第4、5个参数
            alert(5)
            try{
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            } catch(e) { alert(e.name + ": " + e.message);
                alert(JSON.stringify(e));
            }
            dataURL =dataURL.replace("data:image/png;base64,", "");
            //dataURL =encodeURIComponent(dataURL);
            alert(dataURL);
            callback(dataURL);
            canvas = null;
        };
        img.src = src;alert(6.5)
    }*/
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();
    }

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue冷门技巧递归组件实践示例详解

    Vue冷门技巧递归组件实践示例详解

    这篇文章主要为大家介绍了Vue冷门技巧递归组件实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

    vue-cli5.0 webpack 采用 copy-webpack-plugin 打包复制文件的方法

    今天就好好说说vue-cli5.0种使用copy-webpack-plugin插件该如何配置的问题。这里我们安装的 copy-webpack-plugin 的版本是 ^11.0.0,感兴趣的朋友一起看看吧
    2022-06-06
  • nuxt3中server routes的使用详解

    nuxt3中server routes的使用详解

    本文主要介绍了nuxt3中server routes的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 详解Vue中如何实现图片处理与滤镜效果

    详解Vue中如何实现图片处理与滤镜效果

    Vue.js作为一个灵活的JavaScript框架,可以很容易地与图像处理库和滤镜效果库集成,以实现各种图像处理需求,下面我们就来学习一下vue是如何实现图片处理与滤镜效果的吧
    2023-10-10
  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    这篇文章主要介绍了VUE 自定义组件模板的方法,结合实例形式详细分析了vue.js自定义组件模板的相关步骤与操作技巧,需要的朋友可以参考下
    2019-08-08
  • vue从后台渲染文章列表以及根据id跳转文章详情详解

    vue从后台渲染文章列表以及根据id跳转文章详情详解

    这篇文章主要给大家介绍了关于vue从后台渲染文章列表以及根据id跳转文章详情的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    Vue报错Syntax Error:TypeError: this.getOptions is not a 

    前几天在vue运行项目过程中报错了,所以下面这篇文章主要给大家介绍了关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法,需要的朋友可以参考下
    2022-07-07
  • vue如何查找数组中符合条件的对象

    vue如何查找数组中符合条件的对象

    这篇文章主要介绍了vue如何查找数组中符合条件的对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue3使用wangeditor封装和自定义上传文件官方教程

    vue3使用wangeditor封装和自定义上传文件官方教程

    这篇文章主要为大家介绍了vue3使用wangeditor封装和自定义上传文件的官方教程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-06-06
  • 解决vue语法会有延迟加载显现{{xxx}}的问题

    解决vue语法会有延迟加载显现{{xxx}}的问题

    今天小编就为大家分享一篇解决vue语法会有延迟加载显现{{xxx}}的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论