[英]upload canvas image to S3 server
有人可以告诉我如何使用AWS JavaScript将画布图像上传到S3服务器吗?
我在使用JavaScript SDK在Amazon S3服务器上传图像时遇到了一些麻烦,需要实现以下功能。
- >在HTML5画布上创建图像并在JavaScript中调整图像大小。
- >然后将图像上传到Amazon S3服务器。
但问题是:
*)在将图像上传到S3服务器时,它将在S3上而不是图像上传图像像素信息。
因此,在S3浏览器预览中,它使用以下代码显示图像流而不是图像。
此外,AWS Javascript支持Body,格式如下Buffer,Typed Array,Blob,String,ReadableStream。
以下是代码:
HTML代码
<canvas id="myCanvas" width="800" height="800" style="background-color: greenyellow;">Your browser doesn't support html5! Please download the latest version.
</canvas>
<input type="button" id="upload-button" value="Upload to S3" />
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.4.min.js"></script>
<script type="text/javascript">
AWS.config.update({ accessKeyId: 'ACCESSKEY', secretAccessKey: 'SECRETKEY' });
AWS.config.region = 'ap-southeast-1';
$(function () {
$("#upload-button").click(OnUpload);
});
function OnUpload(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = 'Images/IMG_0001.JPG';
img.onload = function () {
<!--image resize -->
var MAX_WIDTH = 200;
var MAX_HEIGHT = 200;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
<!--image resize end-->
var imageData = ctx.getImageData(0, 0, width, height);
var typedArray = imageData.data;
var bucket = new AWS.S3({ params: { Bucket: 'bucketName' } });
var results = document.getElementById('results');
results.innerHTML = '';
var params = { Key: "sample.png", ContentType: "image/png", Body: typedArray };
bucket.putObject(params, function (err, data) {
results.innerHTML = err ? 'ERROR!' : 'UPLOADED.';
});
}
}
</script>
有人可以告诉我该怎么做吗? 提前致谢...
对于仍然面临问题的人来说,这将节省一些时间:
var canvas = document.getElementById("imagePreviewChatFooter");
var dataUrl = canvas.toDataURL("image/jpeg");
var blobData = dataURItoBlob(dataUrl);
var fileName = file.name;
var params = {Key: fileName, ContentType: file.type, Body: blobData};
bucket.upload(params, function (err, data) {
console.log(data);
console.log(err ? 'ERROR!' : 'UPLOADED.');
});
和
function dataURItoBlob(dataURI) {
var binary = atob(dataURI.split(',')[1]);
var array = [];
for(var i = 0; i < binary.length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
}
@Rahil Sharmas的答案很有用,在某些方面,使用辅助函数更好。 canvas api实际上有一个内置的toBlob
方法,你可以在canvas元素上调用它。 我尝试使用异步等待,但有错误,不是100%肯定,但我想你必须使用回调。 签名是:
canvas.toBlob(callback, mimeType, quality)
回调接收blob,mimeType和quality是mimeType默认为image/png
选项
所以我的实现的通用版本是:
canvas.toBlob(blob => upload(blob), 'image/jpeg', 1.0)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.