从Amazon S3将图像编码为Base64
Encode image to Base64 from Amazon S3
我有一个包含图像的iframe。图像源链接到S3
桶中的图像。我需要在Base64中编码此图像,并将iframe的主体保存在数据库中。
我该怎么做?
试试这个如何访问<在文件从iframe?>
$('#Iframe1').contents().find('img').css({'width':'100%','height':'90%'});
然后使用这个函数从这里得到JavaScript中的图像数据?
function getBase64Image(img) {
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Copy the image contents to the canvas
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
// Get the data-URL formatted image
// Firefox supports PNG and JPEG. You could check img.src to
// guess the original format, but be aware the using "image/jpg"
// will re-encode the image.
var dataURL = canvas.toDataURL("image/png");
return dataURL.replace(/^data:image'/(png|jpg);base64,/, "");
}
如果您将s3存储在binary/blob中,例如,你在服务器端做了如下操作:
...
//event.body - base64 received from client or REST
let decodedImage = Buffer.from(event.body.replace(/^data:(image|application)'/'w+;base64,/, ""), "base64")
var params = {
Bucket: bucket,
Key: key, //
Body: decodedImage,
ContentEncoding: 'base64',
ACL: 'public-read',
ContentType: event.headers["Content-Type"],
}
// Uploading files to the bucket :
...
s3.putObject(params, function (err, data) {
接收它并将其转换回base64可以在前端用代码完成(在示例中是React hook):
const blobToBase64 = (blob) => {
const reader = new FileReader()
reader.readAsDataURL(blob)
return new Promise((rs, rj) => {
reader.onloadend = () => {
rs(reader.result)
}
reader.onerror = rj
})
}
function useImage({s3Link}) {
const [src, setSrc] = React.useState(null)
React.useEffect(() => {
async function query({link}) {
//link is link to s3 bucket URL link e.g
// const link = s3.getSignedUrl('getObject', {
// Bucket: bucketnamw,
// Key: key,
// Expires: 30,
// })
const r = await fetch(link)
const blob = await r.blob()
const base64 = await blobToBase64(blob)
console.log(`base64!`, base64)
setSrc(base64)
}
if (s3Link) {
query({link: s3Link})
}
}, [s3Link, setSrc])
return [{src}]
}
…
const [hookImage] = useImage({s3Link})
视图:
{hookImage.src ? <img src={hookImage.src} /> : null}
相关文章:
- Html页面上的多个Base64图像和平滑加载
- 如何使用jquery将base64图像路径转换为真实路径
- 从Base64 Ionic编码和解码图像
- 如何在JavaScript/Node中计算SHA256哈希和Base64字符串编码
- 显示生成的gif;base64图像使用C#代码隐藏在img中使用JavaScript
- 一个javascript实现base64图像编码并将结果写入文本文件
- base64图像未显示
- 如何使用JavaScript将Base64图像更改为常规图像
- 如何使用Java解码由window.btoa编码的base64图像
- 在 servlet 上上传画布 base64 图像
- 将base64图像数据作为src分配给图像时,Firefox和Chrome上的结果不一致
- 在jQuery中更新base64图像字符串时未进行图像刷新
- websocketapi-图像编码在客户端不产生任何图像类型
- 将图像编码为base64并上传到Phonegap中的web服务
- 我已经从d3图表中创建了一个base64图像,需要使用客户端javascript或angular将其发布到faceboo
- 如何使用jquery将图像编码到base64
- 通过js API消息发布BASE64图像和消息不是UTF-8编码的
- Base64图像从编码到显示
- 如何在Sencha Touch 2中定义一个编码base64图像作为背景
- 从Amazon S3将图像编码为Base64