canvas跨域问题

活动页需要合成一张海报，所以要用canvas，一开始我以为只是简单合成，后来我发现我错了。

首先我没接触过canvas的任何应用。所以我先上网找了一下教程。。
好像教程都挺简单的

1 var canvas=document.getElementById("myCanvas");//获取cnavas那个dom
2 var ctx=canvas.getContext("2d");//貌似是定义为2D
3 var bg = document.getElementById("scream");//获取id为img的dom4 ctx.drawImage(bg,0,0,750,1159);//把图片插入canvas的方法

这样就可以搞到图片了然后用drawImage()方法就可以了。
看完教程我觉得，这些玩意Low爆了，简单的一逼~
但是我错了，错的很离谱。。

现在存在的两个问题
1.图片加载问题。
2.画图的层级问题。
　　第一个问题图片加载问题，我看到网上很多人用.onload()；并不是说这个方法不好，我个人觉得用complete会方便一点。（因为我这边要把多个图片合成一个海报，所以我就定义了一个开关判断这些图片是否都加载了才执行下一步）注：complete的判断依据是图片是否出现过，然后返回的是true or false这里的出现过与display:none之类的css是无关的。完全是用来判断这个图片是否已经存在网页中，能保证图片完全加载过，这样就不会使canvas画空了。

　　第二个问题图片的层级问题，这个问题只要按顺序写就可以了，最后写的层级最高，所以第一个写的就是背景图了。就是辣么简单！

画完了canvas，就要转换成img图片了，是不是感觉soeasy?合成图片的时候，就出现了跨域问题！！没错就是跨域了，这些图片都是一个页面上的，为什么会跨域呢？因为他们的文件源不一样，所以跨域了！

　　那不是很悲剧吗？我的图片有来自本地（背景图）有来自七牛有来自其他外链的，那可怎么办啊？作为一个有尊严的前端，怎么可以向后端屈服？我们要自强不息。

这个是忘了是啥时候的截图了。

然后我找到了一个属性crossOrigin="anonymous"，据说这个可以解决跨域问题，然后我就加上了

<img id="scream" src="" crossOrigin="anonymous" alt="The Scream" width="220"><!-- 背景图-->

　　好像解决了跨域问题。然后我就高高兴兴的拿给产品看了，但是产品的手机居然还跨域了！！（吐槽一波，测试机的肾5S都没问题，就他的手机出现了跨域问题。mdzz）Cross-origin image load denied by Cross-Origin Resource Sharing policy.（来自产品手机的报错）。这时候没办法，然后我又想了一下，如果全部转换成Base64会不会解决呢？

jset do IT，我就去找后端，让他铺模板的时候，把图片地址换成base64，然鹅其他手机依旧正常，产品的手机依旧有问题。

　　这时候我只能跪着去找后端了，把所有的图片都转换成同源了，后端dalao抚摸着我的头，轻轻的说了一句，“好的”。
最后今天的所有问题都解决了！对了好像忘了说转换成图片用什么方法了。

$('#img').attr('src',canvas.toDataURL());//canvas.toDataURL()就是把图片转换成base64 然后用JQ的attr插进去

转载于:https://www.cnblogs.com/Amcc/p/7110021.html

canvas跨域问题相关推荐

OpenLayers3关于Map Export的Canvas跨域
一 Canvas跨域现象地图导出是地图中常用的功能,并且OpenLayers3中也提供了两个地图导出的例子: http://openlayers.org/en/latest/examples/exp ...
nginx解决微信头像canvas跨域问题
1.背景介绍微信h5界面需要生成截图,采取前端canvas的方案,出现跨域 2.解决方案假设界面是 aa.bb.cc/mydemo/index.html 在nginx里配置 location /m ...
canvas跨域：Tainted canvases may not be exported.
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may no ...
canvas跨域图片报Tainted canvases may not be exported.
canvas跨域图片报Tainted canvases may not be exported.解决办法--在路径后面添加时间戳 img.src = url + "?v=" + n ...
h5跨域访问图片_网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
网页保存为图片及高清截图的优化 | canvas跨域图片配置
本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界将整个网页保存为图片是一个十分有趣的功能,常见于H ...
canvas跨域：Tainted canvases may not be exported解决方法
现象: 使用html2canvas.js插件绘图时跨域图片绘制过程中报错:Tainted canvases may not be exported 解决方法: var content = docume ...
解决Canvas.toDataURL 图片跨域问题
解决Canvas.toDataURL 图片跨域问题参考文章: (1)解决Canvas.toDataURL 图片跨域问题 (2)https://www.cnblogs.com/ajg016/p/547 ...
[html] canvas生成图片有没有跨域问题？如果有如何解决？
[html] canvas生成图片有没有跨域问题?如果有如何解决? 前端设置 useCORS: true.后台配置允许跨域个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很 ...
h5跨域访问图片_h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...

canvas跨域问题

canvas跨域问题相关推荐

最新文章

热门文章