//一般出现跨域, 只需要在图片设置这个属性: crossorigin="anonymous" 允许跨域 即可
<img src="https://www.baidu.com/" id ="img" crossorigin="anonymous">
<button id='btn'>下载</button>
function imgToBase64() {
let img = document.getElementById('img)
let canvas = document.createElement('cavas')
canvas.width = 100
canvas.width = 100
let ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0)
retrun canvas.toBaseUrl('image/png')
}
// 下载图片
document.getElementById('btn').onclick= () => {
let a = document.createElement('a')
a.setAttribute('href', imgToBase64() )
a.setAttribute('download', 'img.png' )
a.click()
a.remove()
}
尽管设置了允许跨域,依然出现画布被污染的报错提示 ,所有 换了一种方式
function imgToBase64() {
let img = new Image()
img.src = 'https://www.baidu.com/'
img.setAttribute('crossorigin', ' *' )
let canvas = document.createElement('cavas')
canvas.width = 100
canvas.width = 100
let ctx = canvas.getContext('2d');
img.onload = () => {
ctx.drawImage(img,0,0)
downloadImg ( canvas.toBaseUrl('image/png') )
}
}
function downloadImg(src){
const qrLinkEl = document.createElement('a')
qrLinkEl.setAttribute('href', url)
qrLinkEl.setAttribute('download', 'qr.png')
qrLinkEl.click()
qrLinkEl.removeAttribute('click')
}
``图片转base64跨域问题
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 远程图片转成base64，网上一搜，基本都是说用canvas的toDataURL()来实现，实际上这会遇到跨域安全...
- 为了试验先模拟一下 改hosts 在C:\Windows\System32\drivers\etc加一行 表示调用...
- 当你有多个base64字符串时，使用循环base64.decodestring(i)时，会出现编码错。这时需要使用...
