提交 586c7134 authored 作者: 钟是志's avatar 钟是志

处理铜川的学生头像侧倒的bug

上级 8879eab7
import React, { useState } from 'react'; import React, { useState } from 'react';
export default function HandlePhoto({ urlObj, style, ...props}) {
/***
* 处理铜川学生头像颠倒的bug
* */
export default function HandlePhoto({ urlObj, style, ...props }) {
let url = ''; let url = '';
try { try {
url = JSON.parse(urlObj).url; url = JSON.parse(urlObj).url;
...@@ -8,6 +12,24 @@ export default function HandlePhoto({ urlObj, style, ...props}) { ...@@ -8,6 +12,24 @@ export default function HandlePhoto({ urlObj, style, ...props}) {
url = urlObj; url = urlObj;
} }
const [needTransForm, setTransform] = useState(false); const [needTransForm, setTransform] = useState(false);
if (url) {
getIsNeedTransform(url).then((res) => {
if (res) {
setTransform(true);
}
});
} else {
return null;
}
let styleThis = {
...style,
transform: needTransForm ? 'rotate(-90deg)' : 'none',
};
return <img src={url} {...props} style={styleThis} />;
}
export function getIsNeedTransform(url) {
return new Promise((resolve, reject) => {
if (url) { if (url) {
const img = new Image(); const img = new Image();
img.src = url; img.src = url;
...@@ -15,24 +37,24 @@ export default function HandlePhoto({ urlObj, style, ...props}) { ...@@ -15,24 +37,24 @@ export default function HandlePhoto({ urlObj, style, ...props}) {
if (img.complete) { if (img.complete) {
// 打印 // 打印
if (img.width > img.height) { if (img.width > img.height) {
setTransform(true); resolve(true);
} else {
resolve(false);
} }
console.log(img.width, img.height);
// alert('from:complete : width:'+img.width+',height:'+img.height)
} else { } else {
// 加载完成执行 // 加载完成执行
img.onload = () => { img.onload = () => {
if (img.width > img.height) { if (img.width > img.height) {
setTransform(true); resolve(true);
} else {
resolve(false);
} }
}; };
} }
}else{
return null; img.onerror = () => {
} resolve(false);
let styleThis = { };
...style,
transform : needTransForm ? 'rotate(-90deg)' : 'none',
} }
return <img src={url} {...props} style={styleThis}/> });
} }
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论