iT邦幫忙

0

php 內用 javascript html 可否變成 API 去直接輸出圖片 ?

html 是
http://abc.com.tw/test.html

test.html 內容如下

<!DOCTYPE html>
<html>
<head>
    <title>test page</title>
</head>
<body>
    <div id="output"></div>
    <script src="jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="jquery.qrcode.js"></script>
    <script>
        jQuery(setTimeout(function () {
            jQuery('#output').qrcode({
                render: "canvas",
                text: 'test_page',
                width: 200,
                height: 200,
                background: "#ffffff",
                foreground: "#000000",
                src: 'logob.jpg',
                imgWidth: 50,
                imgHeight: 50
            });
            var canvas = $('#output canvas');
            var img = canvas.get(0).toDataURL("image/png");
            document.write('<img src="'+img+'"/>');
        },100))
    </script>
</body>
</html>

輸出是這樣的
https://ithelp.ithome.com.tw/upload/images/20190510/20110611cHinwCTq36.png

想要用引用的方式顯示 那個 html 內的 image 要如何改這 html
引用的方式是 :

<img src="http://abc.com.tw/test.php" alt="test qr-code">

不知道要如何改那個 test.html ....變成 test.php

像這樣

https://ithelp.ithome.com.tw/upload/images/20190510/20110611zaSbJ9wMhG.png

附上上圖 php 內容

<?php
$filename = "palm-fronds-and-sky.png";
$handle = fopen($filename, "rb");
$contents = fread($handle, filesize($filename));
fclose($handle);
header("content-type: image/png");
echo $contents;
?>
看更多先前的討論...收起先前的討論...
dragonH iT邦大師 1 級 ‧ 2019-05-10 09:59:19 檢舉
這樣引用有什麼特別的用處嗎?

為什麼不直接在你需要qrCode的網頁產生qrCode
fillano iT邦超人 1 級 ‧ 2019-05-10 10:07:42 檢舉
用iframe來引用啦,html檔不是影像檔,用img永遠不可能的。
我只能說,太跳躍性的思考方式了。
echochio iT邦研究生 3 級 ‧ 2019-05-10 10:24:46 檢舉
@ dragonH @fillano
或許您認為沒意義但對於團隊來說做成API 就有意義
我只是拿 QR code 為例 ... 我的 html 其他的繪圖功能
php 做的到 Return a PHP page as an image

$name = './img/ok.png';
$fp = fopen($name, 'rb');
header("Content-Type: image/png");
header("Content-Length: " . filesize($name));
fpassthru($fp);

還看到 有這樣寫的....
$filename = "/path/to/your/file.png";
$handle = fopen($filename, "rb");
$contents = fread($handle, filesize($filename));
fclose($handle);
header("content-type: image/png");
echo $contents;
dragonH iT邦大師 1 級 ‧ 2019-05-10 10:39:15 檢舉
有後端語言的話

情況完全就不一樣了吧

而且你上述說的這兩個方法

也是有把 header 的 content-type 設為 image/png

並不是直接引用html唷

所以@fillano大 也沒說錯
echochio iT邦研究生 3 級 ‧ 2019-05-10 10:45:20 檢舉
@ dragonH
那改成 php 也可呀 ... 您可協助嗎 ?
應該是說把 javascript 內的 var img 傳到 php
然後再由 php 顯示 ......
就是這個寫不出來
dragonH iT邦大師 1 級 ‧ 2019-05-10 10:56:02 檢舉
這我就沒辦法了 抱歉

這部分我沒有相關經驗

或許你可以改個標題

讓有經驗的php邦友看到點進來
froce iT邦大師 4 級 ‧ 2019-05-10 10:56:29 檢舉
說真的,我還是沒看懂你要啥。
你是要在前端把 html string 轉 qrcode,然後後端收到 qrcode 再轉 html 輸出?
echochio iT邦研究生 3 級 ‧ 2019-05-10 11:03:53 檢舉
@froce
大概是這樣沒錯 ... html string 轉 qrcode ... 重點是圖片 (正確的說我還有其他的東西在裡面沒寫出來)
可否用 content-type: image/png 把圖傳出去
froce iT邦大師 4 級 ‧ 2019-05-10 11:21:42 檢舉
1.https://pjchender.blogspot.com/2019/01/js-javascript-input-file-upload-file.html
2.https://github.com/khanamiryan/php-qrcode-detector-decoder

把圖傳回後端簡單,但是後端解碼我沒測過。
然後我還是不知道你為何要做這種多此一舉的設計...
要保密的話還不如做加密。
echochio iT邦研究生 3 級 ‧ 2019-05-10 11:40:23 檢舉
@froce 感謝了
剛剛想到一個很廢的方法 ... 反正會抓老鼠的貓 ....只是很廢的
還沒實作 .....

寫個 php 去抓 html 大概是
$url = "http://abc.com.tw/test.html";
$contents = file_get_contents($url);

然後取 那段 "bas64, " 後面圖片 內容再 echo 出來 ......
這方法很廢吧
weiclin iT邦高手 4 級 ‧ 2019-05-10 11:57:28 檢舉
你這樣做取不到 base64 的, file_get_contents 不會執行 js, 所以沒用
echochio iT邦研究生 3 級 ‧ 2019-05-10 12:16:20 檢舉
哈 ... 那還要想 辦法 .... PhantomJS or domcurl ?
fillano iT邦超人 1 級 ‧ 2019-05-10 13:44:01 檢舉
PhantomJS就是Server Side了,感覺會疊床架屋。既然要做成API,你不考慮用Server Side的方式做?
echochio iT邦研究生 3 級 ‧ 2019-05-10 14:01:58 檢舉
搞了老半天 .... 有寫出來了 ...
php 呼叫爬蟲 ... 挖哩 .... 爬出來的資訊 抓圖... 丟出 ...
大概就這樣 ... 這樣交卷老闆會罵吧 .... 哈
效能奇差 .... 還不如翻掉重寫 JS 那段 ....
那個 誰誰誰 ... JS 可以改用 php 重寫嗎 ?
froce iT邦大師 4 級 ‧ 2019-05-10 14:14:24 檢舉
...

1.PhantomJS已經被我遺忘了,因為我記得年初就說不繼續開發了
2.這種莫名其妙的解法,我覺得你還是及早規劃翻掉重寫好。XD
tzuchin iT邦新手 5 級 ‧ 2019-05-11 10:34:43 檢舉
看完前面,我還是覺得不是很懂XD
如果只是要把QR Code從後端產出
為什麼不一開始就在後端做就好?
而是先從前端做好再給後端重新輸出...
echochio iT邦研究生 3 級 ‧ 2019-05-11 12:28:55 檢舉
@tzuchin
QR Code 這是範例 ...... 總不能把那 RD 寫的 js 貼 出來吧 ? 老闆會把我砍了 ....
只是一直搞不出來 ... 那個用 js 產的圖如何變成 API ....
反正就是 想法做成 API 就是了 ......
那個 API 當然要用 post 參數 ......
就用 QR Code 先post 參數 (大小 , 前景顏色, 背景顏色, LOGO ......)
做出來再換一下 JS ... 就可交卷了....
harutsuki iT邦新手 5 級 ‧ 2019-05-13 10:55:03 檢舉
無法變API,請用Server端解決
echochio iT邦研究生 3 級 ‧ 2019-05-14 18:49:01 檢舉
@harutsuki
不知耶,老闆交代我的工作,我不知道能不回他您說的這句話
無法變API , 請用Server 端解決......

哈哈明知不可能但是變可能了...
這就是請你來的目的

1 個回答

0
vegalou
iT邦新手 4 級 ‧ 2019-05-24 08:22:54

JQ -> AJ -> IMG.SRC = data.base64

或者直接 $('#myImg').attr('src',"foo.php");

我要發表回答

立即登入回答