Cách lấy toàn bộ hình ảnh trong file css

Bạn thực sự mệt mỏi khi thiết kế website với giao diện giống mẫu của web khác, công việc phải thao tác tải từng ảnh lấy trong file CSS, bằng cách copy link ảnh có trong thuộc tính css background:url(...), background-image:url(...) và download chúng trên trình duyệt.

Trong trường hợp file css sử dụng rất nhiều ảnh có thể bạn phải tải tới gần 100 ảnh quả là một điều khủng khiếp, không những thế nó còn làm mất thời gian cho những việc khác.
Bạn viết ra một phần mềm C#, cũng có thể đơn giản là đoạn script PHP thực hiện công việc trích các files ảnh từ file *.css, nhưng mình nghĩ chắc chắn là ứng dụng của bạn nó đơn giản và sẽ không thực hiện được việc tìm lặp những tài nguyên khác ở nhiều level.

Nếu bạn đã đọc qua ứng dụng copy giao diện website của phần mềm HTTrack, những gì mà công cụ này làm được chắc hẳn sẽ có ý tưởng sử dụng ngay chính phần mềm này làm người giúp việc đắc lực cho mình.
Bạn không cần phải mất times cho việc tải tửng ảnh nữa, tool này rất nhanh chóng chúng ta chỉ mất chưa đầy 1 phút trong khi HTTrack tải tất cả các ảnh, tài nguyên được tìm thấy trong file đầu vào và các files phát hiện mới.

Trước tiên xem hướng dẫn sử dụng phần mềm HTTrack với giao diện command line tại đây. Ví dụ công việc của chúng ta là tải tất cả các binary files có trong URL CSS.

httrack http://resources.elliman.com/style/vow/core.css -B -O /tmp/images_res

Mở cmd và gõ vào lệnh trên, bạn đợi một lúc dự án Httrack sẽ tải các files vào trong thư mục c:/tmp/images_res.
Chú ý: tùy vào thư mục hiện tại mà CMD đang làm việc, giả sử ở ví dụ trên bạn đang chạy lệnh tại thư mục c:/…

Tham số -B cho phép tải đường dẫn URL con, ví dụ: file css có địa chỉ:
http://domain.com/style/core.css
Và những file ảnh chứa trong path, chẳng hạn http://domain.com/style/images/img/1.gif
Khai báo tham số -B để không bỏ qua mọi tài nguyên trong deep URL.

Bạn có thể thiết lập giới hạn level bởi các tham số như:
-Y: URL ở level1
-rN: N level. ie: -r5 = 5 levels.

Tuy nhiên, nếu bạn vẫn dữ nguyên cấu trúc thư mục các files ảnh thì hãy sử dụng lệnh trên. Nhưng nếu muốn đưa các files tải về nhóm vào một thư mục thì khai báo thêm tham số -N1 như dưới đây.

httrack http://resources.elliman.com/style/vow/core.css -B -N1 -O /tmp/images_res

Nhập lệnh trên CMD terminal và hưởng thụ. Kết quả:

Đổi hàng loạt đường dẫn ảnh mới

Sau khi lưu tất cả các files ảnh có trong .css, chúng ta sẽ cần phải đổi lại đường dẫn URL của ảnh trong trường hợp download chúng vào một mục như trình bày ở trên. Nếu số lượng thay đổi ít thì có thể sửa trực tiếp trong file tuy nhiên nếu quá nhiều URL cần đổi lại path thì các bạn có thể tạo script để thực hiện việc này.
Tôi có viết ra một script PHP đơn giản, giúp bạn chuyển đổi hàng loạt đường dẫn images cho thư mục lưu chung. Tham khảo dưới đây:

<?php
$css_url=isset($_GET['file'])? $_GET['file']:"";
if(empty($css_url)){
	echo 'Not found css file';
	exit();
}
$url=parse_url($css_url);
$base=$url['scheme'].'://'.$url['host'];	//base url
//get file name
$filename=basename($css_url);
$filename=preg_replace('#\?.+#','',$filename);

$path=substr($url['path'],0,strrpos($url['path'],'/'));
$replace_path='assets/images';
$css=file_get_contents($css_url);
preg_match_all('#(background-image|background)(\s+)?\:([\s\w\#\-~@$&=]+)?url(\s+)?\((.+?)\)#',$css,$data);
echo '<pre>';
//print_r($data);
echo '</pre>';

if(isset($data[5]) && is_array($data[5])):

foreach($data[5] as $img){
	$img=ltrim($img,'"');
	$img=ltrim($img,"'");
	$img=rtrim($img,'"');
	$img=rtrim($img,"'");
	$t=strrpos($img,'/');
	$remov=substr($img,0,$t);
	
	$css=str_replace($remov,$replace_path,$css);
	//echo str_replace($remov,$replace_path,$img).'<br/>';
	/*if(substr(trim($img),0,1)=='/') $file=$base.trim($img);
	else $file=$base.$path.'/'.trim($img);
	echo $file.'<br/>';*/
}
endif;
//save css file
file_put_contents(time().'-'.$filename,$css);
echo 'Done !';
?>

Tác giả: hoangweb.com

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook