github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-13 01:28:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 预览图片尺寸的优化

Browse Source
This commit is contained in:
kuaifan 2022-06-07 19:25:28 +08:00
parent 4c068f4a62
commit 33db978e36
7 changed files with 94 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Http/Controllers/Api/FileController.php
View File

@ -525,7 +525,8 @@ class FileController extends AbstractController
Base::makeDir(public_path($tmpPath));
$tmpPath .= md5($text) . "." . $matchs[1][$key];
if (file_put_contents(public_path($tmpPath), base64_decode($text))) {
$data['content'] = str_replace($matchs[0][$key], '<img src="' . Base::fillUrl($tmpPath) . '"', $data['content']);
$paramet = getimagesize(public_path($tmpPath));
$data['content'] = str_replace($matchs[0][$key], '<img src="' . Base::fillUrl($tmpPath) . '" original-width="' . $paramet[0] . '" original-height="' . $paramet[1] . '"', $data['content']);
$isRep = true;
}
}

3
app/Models/ProjectTaskContent.php
View File

@ -67,7 +67,8 @@ class ProjectTaskContent extends AbstractModel
Base::makeDir(public_path($tmpPath));
$tmpPath .= md5($text) . "." . $matchs[1][$key];
if (file_put_contents(public_path($tmpPath), base64_decode($text))) {
$content = str_replace($matchs[0][$key], '<img src="{{RemoteURL}}' . $tmpPath . '"', $content);
$paramet = getimagesize(public_path($tmpPath));
$content = str_replace($matchs[0][$key], '<img src="{{RemoteURL}}' . $tmpPath . '" original-width="' . $paramet[0] . '" original-height="' . $paramet[1] . '"', $content);
}
}
$pattern = '/<img(.*?)src=("|\')https*:\/\/(.*?)\/(uploads\/task\/content\/(.*?))\2/is';

54
app/Models/ProjectTaskFile.php
View File

@ -3,6 +3,7 @@
namespace App\Models;
use App\Module\Base;
use Cache;
/**
* App\Models\ProjectTaskFile
@ -19,6 +20,8 @@ use App\Module\Base;
* @property int|null $download 下载次数
* @property \Illuminate\Support\Carbon|null $created_at
* @property \Illuminate\Support\Carbon|null $updated_at
* @property-read int $height
* @property-read int $width
* @method static \Illuminate\Database\Eloquent\Builder|ProjectTaskFile newModelQuery()
* @method static \Illuminate\Database\Eloquent\Builder|ProjectTaskFile newQuery()
* @method static \Illuminate\Database\Eloquent\Builder|ProjectTaskFile query()
@ -38,6 +41,11 @@ use App\Module\Base;
*/
class ProjectTaskFile extends AbstractModel
{
protected $appends = [
'width',
'height',
];
/**
* 地址
* @param $value
@ -57,4 +65,50 @@ class ProjectTaskFile extends AbstractModel
{
return Base::fillUrl($value ?: Base::extIcon($this->ext));
}
/**
* 宽
* @return int
*/
public function getWidthAttribute()
{
$this->generateSizeData();
return $this->appendattrs['width'];
}
/**
* 高
* @return int
*/
public function getHeightAttribute()
{
$this->generateSizeData();
return $this->appendattrs['height'];
}
/**
* 生成尺寸数据
*/
private function generateSizeData()
{
if (!isset($this->appendattrs['width'])) {
$width = -1;
$height = -1;
if (in_array($this->ext, ['jpg', 'jpeg', 'gif', 'png'])) {
$path = public_path($this->getRawOriginal('path'));
[$width, $height] = Cache::remember("File::size-" . md5($path), now()->addDays(7), function () use ($path) {
$width = -1;
$height = -1;
if (file_exists($path)) {
$paramet = getimagesize($path);
$width = $paramet[0];
$height = $paramet[1];
}
return [$width, $height];
});
}
$this->appendattrs['width'] = $width;
$this->appendattrs['height'] = $height;
}
}
}

5
resources/assets/js/components/PreviewImage/components/swipe.vue
View File

@ -54,7 +54,10 @@ export default {
if (item.src) {
item.src = $A.rightDelete(item.src, "_thumb.jpg");
}
return item
if (parseInt(item.width) > 0 && parseInt(item.height) > 0) {
return item
}
item = item.src;
}
return {
html: `<div class="preview-image-swipe"><img src="${$A.rightDelete(item, "_thumb.jpg")}"/></div>`,

22
resources/assets/js/components/TEditor.vue
View File

@ -508,15 +508,23 @@
},
getValueImages() {
let imgs = [];
let imgReg = /<img.*?(?:>|\/>)/gi;
let srcReg = /src=['"]?([^'"]*)['"]?/i;
let array = (this.getContent() + "").match(imgReg);
const imgs = [];
const imgReg = /<img.*?(?:>|\/>)/gi,
srcReg = new RegExp("src=([\"'])([^'\"]*)\\1"),
widthReg = new RegExp("original-width=\"(\\d+)\""),
heightReg = new RegExp("original-height=\"(\\d+)\"")
const array = (this.getContent() + "").match(imgReg);
if (array) {
for (let i = 0; i < array.length; i++) {
let src = array[i].match(srcReg);
if(src[1]){
imgs.push(src[1]);
const src = array[i].match(srcReg);
const width = array[i].match(widthReg);
const height = array[i].match(heightReg);
if(src){
imgs.push({
src: src[2],
width: width ? width[1] : -1,
height: height ? height[1] : -1,
});
}
}
}

10
resources/assets/js/pages/manage/components/DialogView.vue
View File

@ -530,18 +530,18 @@ export default {
const array = text.match(new RegExp(`<img[^>]*?>`, "g"));
const list = [];
if (array) {
const srcReg = new RegExp("src=\"(.*?)\""),
const srcReg = new RegExp("src=([\"'])([^'\"]*)\\1"),
widthReg = new RegExp("(original-)?width=\"(\\d+)\""),
heightReg = new RegExp("(original-)?height=\"(\\d+)\"")
array.some(res => {
const srcMatch = res.match(srcReg),
widthMatch = res.match(widthReg),
heightMatch = res.match(heightReg);
if (srcMatch && widthMatch && heightMatch) {
if (srcMatch) {
list.push({
src: srcMatch[1].replace(/\{\{RemoteURL\}\}/g, baseUrl),
width: widthMatch[2],
height: heightMatch[2],
src: srcMatch[2].replace(/\{\{RemoteURL\}\}/g, baseUrl),
width: widthMatch ? widthMatch[2] : -1,
height: heightMatch ? heightMatch[2] : -1,
})
}
})

14
resources/assets/js/pages/manage/components/TaskDetail.vue
View File

@ -1269,10 +1269,20 @@ export default {
const index = list.findIndex(item => item.id === file.id);
if (index > -1) {
this.$store.state.previewImageIndex = index;
this.$store.state.previewImageList = list.map(({path}) => path);
this.$store.state.previewImageList = list.map(item => {
return {
src: item.path,
width: item.width,
height: item.height,
}
});
} else {
this.$store.state.previewImageIndex = 0;
this.$store.state.previewImageList = [file.path];
this.$store.state.previewImageList = [{
src: file.path,
width: file.width,
height: file.height,
}];
}
return
}