自己项目数据库里的图片都不让取,这是什么道理
- 发布:2023-08-14 18:46
- 更新:2023-08-15 16:16
- 阅读:422
蛋黄肉粽 (作者)
前端网页托管和云数据库都在同一个云服务器上,怎么就不算同源呢。图片用在一个画布插件上的,
<view class="poster" v-if="!show_poster">
<lPainter :board="posterObj" ref="painter"></lPainter>
<view class="footer-btn">
<view class="" @click="toCopy">
复制网址
</view>
<view class="save" @click="toSave">
保存
</view>
</view>
上面是主程序
toSave() {
uni.showLoading({
title:'海报生成中',
})
const painter = this.$refs.painter;
painter.canvasToTempFilePath().then(res => {
this.path = res.tempFilePath;
this.$refs.posterImg.open();
this.show_poster=true;
uni.hideLoading()
});
上面是方法
canvasToTempFilePath(args = {}) {
const {use2dCanvas, canvasId} = this
return new Promise((resolve, reject) => {
let { top: y = 0, left: x = 0, width, height } = this.boundary || this
let destWidth = width this.dpr
let destHeight = height this.dpr
// #ifdef MP-ALIPAY
width = width this.dpr
height = height this.dpr
// #endif
const copyArgs = {
x,
y,
width,
height,
destWidth,
destHeight,
canvasId,
fileType: args.fileType || this.fileType,
quality: /\d/.test(args.quality) ? args.quality : this.quality,
success: resolve,
fail: reject
}
if (use2dCanvas) {
delete copyArgs.canvasId
copyArgs.canvas = this.canvas
}
uni.canvasToTempFilePath(copyArgs, this)
})
这画布组件里的方法
蛋黄肉粽 (作者)
无论在内置浏览器还是其他浏览器上运行都没有问题,但H5部署到服务器以后生成海报时会提示错误:errMsg:"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
蛋黄肉粽 (作者)
https://mp-1fa2fa47-4b9a-4946-a09e-126fce9df44c.cdn.bspapp.com/cloudstorage/39ba8070-aa97-47f0-8b58-bfb4d5be0b27.webp,所有问题都在这张图片上,只要有这张图片就会弹出错误"canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
问题是这是一张从项目自带数据库里get的一张图片地址么,而且https://mp-1fa2fa47-4b9a-4946-a09e-126fce9df44c.cdn.bspapp.com这个域名也加了跨域白名单了,怎么就成了有毒了呢,这个问题不应该是bug么
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序
先使用api下载图片在使用
-
蛋黄肉粽 (作者)
如果需要复用的图片下载也就罢了,都不用下载,直接方static里好了。但有些即用即走的图片,比如用户头像,这个下载就不对了,不可能每次都下载啊,这个怎么处理
2023-08-15 09:28
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群:120594820,代表作灵感实用工具小程序
不是那种下载,使用uni.downloadFile
蛋黄肉粽 (作者)
完美!居然解决了!多谢piaoyi_UI是大神的点拨! uni.downloadFile果然能够解决浏览器报canvas有毒的问题,但下载时依然会报跨越错误(这TM绝对是个bug,自己的在unicloud买的阿里云服务空间,取数据库里的图片居然会报跨域,并且是在已经将服务器域名设置为跨域白名单的情况下!)
重点来了~~~突然想到之前在网上搜到的一篇文章说在url后面加随机数可以解决跨域,于是在uni.downloadFile的url参数后面加了时间参数,居然真的不报跨域了,下载成功,canvas绘制成功!至于为什么加了随机数就不跨域了,鬼知道,反正是神操作!
以上两个步骤缺一不可,就此完美解决canvas绘制时(我用的是第三方插件)引用数据库图片跨域问题。再次感谢大神们!