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

这两天接到一个需求，需要做一个图片裁剪功能。找到了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>

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

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

canvas跨域图片报Tainted canvases may not be exported.
canvas跨域图片报Tainted canvases may not be exported.解决办法--在路径后面添加时间戳 img.src = url + "?v=" + n ...
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决,分享给大家,具体如下: [场景] 用户打开网页,则请求腾讯COS(图片服务器)上的图片js代码.使用canvas绘图. ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
svg转成jpg/png图片跨域图片
svg转成jpg/png图片,svg含跨域图片基本思路: svg: svg效果: 转成jpg/png: base64串显示效果由于svg上含有跨域图片,图片没显示出来,所以最终处理结果: 解决跨域 ...
vue 跨域图片下载
在项目中遇到一个问题,后端传回来的图片可以查看,但是下载时会提示跨域. 再搜索了多种办法下,发现要提前把图片转为base64,在进行下载,就可以成功了. 具体方法如下. // 下载图片insertIm ...
canvas读取跨域图片像素失败 Failed to execute getImageData The canvas has been tainted by cross-origin data
错误描述: Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The ca ...
php解决跨域问题6,关于php:tp6-通过全局中间件-解决跨域问题
tp6官网有提供跨域决绝办法,当我间接应用无奈用.(可能我用的姿态不对). 定义中间件 declare (strict_types = 1); namespace app\middleware; us ...
什么是跨域？浏览器为何禁止跨越请求？如何解决浏览器跨越问题
1.什么是跨域? 跨越是产生于浏览器的"同源策略",所谓同源策略是指: 1)协议:http.https 2)域名:www.baidu.com.uland.taobao.com - ...

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

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

最新文章

热门文章