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

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

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

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

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




    
    Title


    
    


但是结果却是:

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

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

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

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

最终版的代码如下:




    
    Title


    
    


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

 

你可能感兴趣的:(前端之路)