Hoàng Web

Thiết Kế Website WordPress

  • Kho giao diện
  • Dịch Vụ
    • Thiết kế web giá rẻ
    • Thiết kế website WordPress
    • Hosting Miễn Phí 100GB
    • Tích hợp thanh toán MoMo, ViettelPay, Vietcombank, MB..
    • Tối ưu Google PageSpeed
    • Sửa lỗi nâng cấp website
    • Viết plugin WordPress
    • Code Tool theo yêu cầu
  • Bảng giá
  • Quy trình làm việc
  • Giới thiệu
  • Liên Lạc
Trang chủ » Công cụ » Cách lấy toàn bộ hình ảnh trong file css

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

Thứ Bảy, 27/09/2014 by Hoàng Quách

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

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ả:
download-all-asset-in-css

Đổ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

  • shares
  • Facebook
  • Facebook Messenger
  • Gmail
  • Viber
  • Skype

Chuyên mục: Công cụ Tìm kiếm: copy, css, files downloader, ripping

Tôi giúp gì cho bạn?

HOÀNG WEB

Địa chỉ: Tây Sơn, Phường Quang Trung, Quận Đống Đa, Hà Nội

Hotline: 0987 342 124 – 0868 292 303 (8h:00 – 21h:00)

Email: [email protected]

Website: www.hoangweb.com

KẾT NỐI VỚI TÔI

  • Facebook
  • GitHub
  • YouTube

SẢN PHẨM

  • Plugin Thanh Toán Quét Mã QR Code Tự Động
  • WP2Speed – Tối ưu Google Speed
  • 23WebHost – Hosting Miễn Phí 100GB

LIÊN KẾT

  • Có nên thuê thiết kế website giá rẻ?
  • Hướng dẫn thanh toán
  • Chính sách hoàn tiền
  • Trung tâm hỗ trợ

Copyright © 2023 | All rights reserved | HOANG WEB
Mọi hình thức sao chép nội dung trên website này mà chưa được sự đồng ý đều là trái phép.