跨域图片使用toDataURL遇坑记。（最终还是解决了）

最新推荐文章于 2023-06-02 11:10:02 发布

Hws有梦想

最新推荐文章于 2023-06-02 11:10:02 发布

阅读量1.2w

点赞数 5

分类专栏：前端之路

本文链接：https://blog.csdn.net/qq_37028216/article/details/80996939

版权

前端之路专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这两天接到一个需求，需要做一个图片裁剪功能。找到了cropper.js，使用起来算是顺手,在做到将截好的图片以base64的形式上传保存的时候，突然遇到了一个之前没有碰到过的问题，没错就是：图片跨域问题。

网上搜锁了一下跨域图片使用toDataURL转换为base64的方法,没错,想必大家也肯定都知道了。

给Img标签设置crossOrign属性,将值设置为""或"Anonymous",事实上如果crossOrigin属性不设置为“use-credentials”,设置为其他的值时，都默认等同于“Anonymous”。

如此设置好后,满心欢喜的去测试，此时的代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="picUrl">
    <button onclick="test()">测试</button>
</body>
<script>
    function test(){
        var url = document.getElementsByName("picUrl")[0].value;
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');

        canvas.width = 100;
        canvas.height = 100;
        var img = new Image();
        //设置图片跨域访问
        img.crossOrigin = 'anonymous';
        img.src = url;
        document.body.appendChild(img);
        img.onload = function () {
            ctx.drawImage(this,0,0,100,100);
            var base64 = canvas.toDataURL('image/jpg', 1);
            console.log(base64)
        };
    }
</script>
</html>

但是结果却是：

报错：图片跨域无权限访问

百思不得其解，明明都设置好了啊，只好继续在百度中探索，但是凭借自己的关键字，搜来搜去都是一样的内容，而且感觉还都是互相复制粘贴的，几乎都快失望了。终于功夫不负有心人，说是因为浏览器使用本地缓存的问题，需要禁止浏览器使用缓存。

如法炮制，在控制台的network里将disablecache勾上以后，满心欢喜的再度尝试！yeah，OK了。But！！！！反转又来了，当你将控制台关掉后，disablecache是无效的，所以说你每次使用这个功能的时候都得开着控制台，那可真是要了命了，不得被人喷死啊！心情又down了下来，又开始了漫长的搜寻之路。终于终于，让我看到了一篇帖子，提到了使用时间戳来解决问题，犹如醍醐灌顶啊，最终解决了这个问题。

发这个帖，最主要的原因是自己觉得解决这个问题花费了太多时间，其实就是一个小细节，希望能帮助更多的人节省时间。另一点就是想说，百度搜索出来有效的帖子太少了，都是互相粘贴。

最终版的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="picUrl">
    <button onclick="test()">测试</button>
</body>
<script>
    function test(){
        var url = document.getElementsByName("picUrl")[0].value;
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext('2d');

        canvas.width = 100;
        canvas.height = 100;
        var img = new Image();
        img.onload = function () {
            ctx.drawImage(this,0,0,100,100);
            var base64 = canvas.toDataURL('image/jpg', 1);
            console.log(base64)
        };
        //设置图片跨域访问
        img.crossOrigin = 'anonymous';
        //加时间戳解决跨域问题
        img.src = url+"?timeStamp="+new Date();  <= 解决问题的关键点
        document.body.appendChild(img);

    }
</script>
</html>

以上纯属个人见解,如果有什么不对的地方，请大家指出，诚虚心受教!

Hws有梦想

关注

5
点赞
踩
22

收藏

觉得还不错? 一键收藏
22
评论
跨域图片使用toDataURL遇坑记。（最终还是解决了）

这两天接到一个需求，需要做一个图片裁剪功能。找到了cropper.js，使用起来算是顺手,在做到将截好的图片以base64的形式上传保存的时候，突然遇到了一个之前没有碰到过的问题，没错就是：图片跨域问题。网上搜锁了一下跨域图片使用toDataURL转换为base64的方法,没错,想必大家也肯定都知道了。给Img标签设置crossOrign属性,将值设置为""或"A...
复制链接

扫一扫