Javascript 角度4中的图像旋转
我试图在上传到我的服务器之前旋转am图像。到目前为止,我采取的步骤是:Javascript 角度4中的图像旋转,javascript,angular,image,Javascript,Angular,Image,我试图在上传到我的服务器之前旋转am图像。到目前为止,我采取的步骤是: 将图像转换为Base64 使用画布旋转base64字符串 将旋转的Base64转换为图像 但我无法将其转换回图像格式。最终图像文件(旋转后)无法上载,因为它是blob 你能告诉我如何将我的旋转Base64字符串转换成图像文件,这样我就可以创建一个blob并上传它 我猜我的旋转函数也不正确,因为我试图转换它,并将转换后的base64字符串打开查看,它给了我一个空白文件(黑色图像文件) 这个问题的根源是当用户在iOS或Andro
function detectFiles(event) {
this.getOrientation(event.target.files[0], function (orientation) {
this.imageOrientation = orientation;
}.bind(this));
console.log('the original image data', event.target.files);
this.selectedFiles = event.target.files;
// SAS : Converting the selected image to Base64 for rotation.
const reader = new FileReader();
reader.onloadend = (e) => {
this.base64Data = reader.result;
const rotatedData = this.rotateBase64Image(this.base64Data);
// SAS: Calling the data uri to blob
const selFile = this.dataURItoBlob(rotatedData);
this.uploadFiles(selFile);
}
reader.readAsDataURL(event.target.files[0]);
}
// SAS: Rotate the image.
function rotateBase64Image(base64ImageSrc) {
const canvas = document.createElement('canvas');
const img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
console.log('image height and width', canvas.width , canvas.height);
}
img.src = base64ImageSrc;
const context = canvas.getContext('2d');
context.translate((img.width), (img.height));
// context.rotate(180 * (Math.PI / 180));
context.rotate(90);
context.drawImage(img, 0, 0);
console.log(canvas);
console.log('the rotated image', canvas.toDataURL());
return canvas.toDataURL();
}
// SAS: Data URI to Blob
function dataURItoBlob(dataURI) {
// convert base64 to raw binary data held in a string
// doesn't handle URLEncoded DataURIs
const byteString = atob(dataURI.split(',')[1]);
// separate out the mime component
const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to an ArrayBuffer
const ab = new ArrayBuffer(byteString.length);
// create a view into the buffer
const ia = new Uint8Array(ab);
// set the bytes of the buffer to the correct values
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
const blob = new Blob([ab], {type: mimeString});
console.log('the value of the blob', blob);
return blob;
}
您可以为它们处理exif旋转,这样它们就不必旋转图像 我创建了一个库,使其不必使用filereader,只需调用
blob.image(),就可以非常轻松地从blob创建图像。然后(成功,失败)
,它将为您处理图像exif旋转
//不相关的代码(仅用于获取带有exif元数据的旋转图像)
var exifImage=https://cors-anywhere.herokuapp.com/http://duckz.serveblog.net/risorse/foto/francia/P1831_21-02-10.jpg'
获取(exifImage)
.then(res=>res.blob())
.然后(blob=>{
//只是为了说明你的形象有问题
const objectURL=URL.createObjectURL(blob)
常量img=新图像()
img.src=objectURL
document.body.appendChild(img)
//screw filereader可以做什么(基于exif数据自动旋转)
//将在img.onload事件中使用新的img元素进行解析
//如果blob不是映像,也将抛出错误(img.onerror)
//这就是你需要的。。。
blob.image().then(img=>{
//将图像转换回blob
var canvas=document.createElement('canvas')
canvas.width=img.width
canvas.height=img.height
const ctx=canvas.getContext('2d')
ctx.drawImage(img,0,0)
canvas.toBlob(上传文件)
//只是为了显示旋转后的图像
document.body.appendChild(img)
})
})
函数上载文件(blob){
//上传blob
}
img{
宽度:100px
}
感谢您宝贵的回答,这肯定会帮助很多面临同样问题的人。虽然出于某种原因,当我尝试使用它时,它会给我错误“属性映像在类型blob上不存在”。。
uploadFiles(selFile) {
// SAS: Setting the 'image uploaded flag' to be retrieved in quick post to prevent duplicate placeholders.
// const file = this.selectedFiles.item(0);
const file = selFile;
this.currentUpload = new Upload(file);
// This is the API call to upload the file.
this.storageApiService.createBlob(file).subscribe((response) => {
console.log(response);
}, (error) => {
console.log(error);
});
}
}