canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
程序员文章站
2023-02-15 11:30:30
这篇文章主要介绍了canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 19-01-18...
我们要绘制一张图片,内容包括一张背景图和一个动态生成的二维码,前提是背景图是项目本身的静态资源,二维码是服务端动态生成的,二者不在同一域名下。
解决办法:把所有图片都重定向同一个域名下:
let count = 0; let bgimg = document.createlement('img'); let qrimg = document.createlement('img'); bgimg.src = redirecturl('x.png'); qrimg.src = redirecturl('y.png'); [bgimg, qrimg].foreach((e) => { e.onload = () => { count ++; if (count === 2) { drawerimg(bgimg, qrimg); } } }) function redirecturl (url) { return 'https://xxx/view?fileurl=' + encodeuricomponent(url); } function drawerimg (imgcontent, qrcontent, scaleby = 2) { let {bgimgw, bgimgh} = {375, 800}; let {qrx, qry, qrw, qrh} = {20, 700, 50, 50}; let canvas = document.createelement('canvas'); let ctx = canvas.getcontext("2d"); canvas.width = bgimgw * scaleby; canvas.height= bgimgh * scaleby; ctx.drawimage(imgcontent, 0, 0, bgimgw * scaleby, bgimgh * scaleby); ctx.drawimage(qrcontent, qrx * scaleby, qry * scaleby, qrw * scaleby, qrh * scaleby); let nodei = document.createelement("img"); nodei.src = canvas.todataurl(); document.body.appendchild(nodei) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。