zoukankan      html  css  js  c++  java
  • 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasEleme...

    问题描述

    当用户点击分享按钮时,生成一张海报,可以保存图片分享到朋友圈,用户的图片是存储在阿里云的OSS,当海报完成后,执行.canvas.toDataURL("image/png")时,出现index.html:28 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported的错误提示,这句话的翻译是uncaught domexception:未能对“htmlcanvaselement”执行“todataurl”:无法导出受污染的画布。因为图片跨域了,对画布造成了污染。

    解决方法

    搜索相关问题,大多是为img设置crossOrigin属性,实现图片允许跨域,即:img.setAttribute("crossOrigin",'Anonymous'),我为图片添加这个属性后,图片无法显示了,报了一个错误:  Access to image at 'https://claystar.oss-cn-shenzhen.aliyuncs.com/pic/9dd6d55c5c7334d9448c4628e6ff69f6.jpg' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.        

    通过和同事沟通讨论得知,只需要为图片添加一个时间戳即可。最后解决方式:                                         

    img.src='http://www.xxxx.png' + '?time=' + new Date()

  • 相关阅读:
    数据库备份,全备份、增量备份与恢复
    虚拟机扩容---续集(热扩容)
    虚拟机扩容
    Linux下R环境安装
    OLAP、OLTP的介绍CBO/RBO
    CRC校验(转)
    产品经理必读的30本书单(转)
    xcode6 下 ios simulator 有 Home 键么?
    如果我可以重新学习iOS开发(转)
    按位与、或、异或等运算方法(转)
  • 原文地址:https://www.cnblogs.com/brock/p/11673177.html
Copyright © 2011-2022 走看看