跨網域iframe的任何燈箱

Question

正在大量搜索該主題，但沒有解決方案... :(在跨域環境中尋找圖片的任何燈箱

預先感謝。

Answer 1

我不確定您在這里要問的是什么，但是如果您要規避跨域JS限制，則可以始終在服務器上創建一個PHP頁面（或類似內容），以從另一個域中獲取圖像並為他們服務。

這是一些jQuery代碼，用於更改圖像對象的src屬性以顯示特定圖片。 假設我們要顯示圖片http://www.someotherdomain.com/images/pictureofbacon.png : http://www.someotherdomain.com/images/pictureofbacon.png ...。

var urlStr = 'http://www.someotherdomain.com/images/pictureofbacon.png';

//encode the image's url for passing 
var url_enc = encodeURIComponent(urlStr); 

$('#imageBacon').attr(
    'src', 'http://www.yourdomain.com/getPhoto?url=' + url_enc
); //call your php page, passing to it the encode image url 

然后，在您的PHP頁面中，您可以獲取URL並在本地處理圖像。 假設您向其傳遞了有效的圖像URL，則該PHP經過測試可以正常工作（需要GD2）。

getPhoto.php

<?php
    $url = $_REQUEST['url'];
    SendImageToBrowser ($url); 

    function SendImageToBrowser($file){
     $info = getimagesize($file);
  $final_width=$info[0];
  $final_height=$info[1];

     switch ( $info[2] ) {
       case IMAGETYPE_GIF:
         $image = imagecreatefromgif($file);
        break;
       case IMAGETYPE_JPEG:
         $image = imagecreatefromjpeg($file);
        break;
       case IMAGETYPE_PNG:
         $image = imagecreatefrompng($file);
        break;
       default:
         return false;
     }
     imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $final_width, $final_height, $width_old, $height_old);
        $mime = image_type_to_mime_type($info[2]);
        header("Content-type: $mime");
        $output = NULL;

     switch ( $info[2] ) {
       case IMAGETYPE_GIF:
         imagegif($image, $output);
       break;
       case IMAGETYPE_JPEG:
         imagejpeg($image, $output);
       break;
       case IMAGETYPE_PNG:
         imagepng($image, $output);
       break;
       default:
         return false;
     }
     return true;
 }
?>