在迭代过程中动态获取图像数据URL
在迭代过程中动态获取图像数据URL
提问于 2018-07-25 02:58:39
假设我有一个包含多个图像URL的数组
const imgs = [
'https://placehold.it/120x120&text=image1',
'https://placehold.it/120x120&text=image2',
'https://placehold.it/120x120&text=image3'
]我想以64位字符串的形式动态获取这些图像，以便为网络请求做准备。我要怎么做才能用javascript来完成这个任务呢？
我目前已经尝试过：
const getDataUrl = (url) => {
return new Promise((resolve, reject) => {
let img = new Image()
let canvas = document.createElement('canvas')
img.setAttribute('crossOrigin', 'anonymous')
img.onload = function(){
canvas.height = img.height
canvas.width = img.width
canvas.getContext('2d').drawImage(img, 0, 0)
resolve(canvas.toDataUrl('png'))
}
img.src = url
})
}
let dataUrls = []
for(let img of imgs){
getDataUrl(img).then(res => {
dataUrls.push(res)
})
console.log(dataUrls)
}但是promise不等待图像加载和解析，我得到一个空数组
因此，我尝试了一个递归解决方案：
let dataUrl = ''
const getDataUrl = (url) => {
let img = new Image()
let canvas = document.createElement('canvas')
img.setAttribute('crossOrigin', 'anonymous')
img.onload = function(){
canvas.height = img.height
canvas.width = img.width
canvas.getContext('2d').drawImage(img, 0, 0)
dataUrl = canvas.toDataUrl('png')
}
img.src = url
if(checkIntegrity()) return dataUrl
}
const checkIntegrity = () => {
if(dataUrl.length > 0){
return true
}else{
return checkIntegrity()
}
}这是令人不快的，因为我必须依赖于dataUrl在全局作用域中，并且无论如何都不能工作，因为当我运行它时，我得到了太多的递归错误。
最后，我想我可以试着预定义onLoad函数，并将resolve函数作为参数传递给它：
const onLoad = (img, resolve) => {
let canvas = document.createElement('canvas')
canvas.height = img.height
canvas.width = img.width
canvas.getContext('2d').drawImage(img, 0, 0)
resolve(canvas.toDataURL('png'))
}
const getDataUrl = (url) => {
return new Promise((resolve, reject) => {
let img = new Image()
img.setAttribute('crossOrigin', 'anonymous')
img.onload = onLoad(img, resolve)
img.src = url
})
}
for(let img of imgs){
getDataUrl(img).then(res => {
console.log(res)
dataUrls.push(res)
})
}
console.log(dataUrls)这是我最成功的尝试，但它最终从每个调用返回data:,，所以它也不起作用。下面是代码小菜一碟：https://jsfiddle.net/5o4Lq3bh/34/
除此之外，我已经无计可施了。我还尝试操作dom挂载的图像，而不是javascript图像对象，并使用计数器和加载的检查和不同的递归函数，但我得到了相同的错误，太多的递归。
我的主要问题似乎是迭代。我非常确定for / of是同步的，所以我猜问题是我不能随意传递解析到其他函数，并期望得到有效的结果。
这将是很容易做的加载，但它必须在飞行中发生，任何帮助是感激的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51505784
复制相关文章
相似问题
腾讯云开发者
