承德微网站建设,飞色网站商城怎么做,制作网站的软件叫什么,wordpress shopping问题原因#xff1a;
toDataURL方法存在跨域限制#xff0c;如果执行时dom内含有跨域的图片则浏览器执行时会报错。 这个根据不同的系统有不同的表现#xff0c;例如#xff1a;生成完毕但控制台有warning类型的警告#xff0c;或者直接异常报error。
解决思路#xff…问题原因
toDataURL方法存在跨域限制如果执行时dom内含有跨域的图片则浏览器执行时会报错。 这个根据不同的系统有不同的表现例如生成完毕但控制台有warning类型的警告或者直接异常报error。
解决思路
解决图片的跨域问题需要前后的配合进行测试进行时发现服务端是支持CORS跨域的因此在前端设置下img的CORS属性即可如果设置后不生效的话需要考虑下是不是由于请求资源都会在CDN服务器中缓存所以设置后会存在不生效的情况。此情况在图片地址后追加时间戳绕过CDN直接请求服务器即可。由于项目开发情况复杂在头部进行统一设置就不用考虑插件差异的情况了
解决方案
资源服务器给图片设置cors请求头允许跨域请求前端设置图片的crossOrigin属性为anonymous来允许跨域并且在图片后缀添加时间戳防止请求CDN缓存资源
完整示例代码如下
!DOCTYPE html
html langzhheadmeta charsetUTF-8titleDocument/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js/scriptscript$(document).ready(function () {var imgs $(img);for (var i 0; i imgs.length; i) {imgs[i].crossOrigin Anonymousimgs[i].src imgs[i].src ? (new Date());}})/script
/headbody原图注意观察图片追加的时间戳与属性img idtest src自行替换 althr生成:
/bodyscriptfunction convertImageToCanvas(image) {var canvas document.createElement(canvas);canvas.width image.width;canvas.height image.height;canvas.getContext(2d).drawImage(image, 0, 0);return canvas;}function convertCanvasToImage(canvas) {var image new Image();image.src canvas.toDataURL(image/png);return image;}function draw(img) {var cs convertImageToCanvas(img);var image convertCanvasToImage(cs);document.body.appendChild(image);}window.onload function () {var img document.getElementById(test);img.onload draw(img);}
/script
/html