vue 图片转base64本地路径跨域

最新推荐文章于 2025-03-14 11:14:44 发布

絮落锦乡

最新推荐文章于 2025-03-14 11:14:44 发布

阅读量2.9k

点赞数

分类专栏： vue 前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/xljx_1/article/details/106162919

版权

在Vue项目中，遇到图片本地路径导致的跨域问题，可以通过两种方式解决：1) 使用nginx配置监听端口转发；2) 将图片放入项目目录，确保与项目在同一地址下。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

代码

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;
                };

            },