從動態PHP庫到畫布的圖像，請提供一些建議

Question

我正在嘗試制作一個Web應用程序，以尋求一些建議。

一些描述我的項目的流程圖： http : //i.imgur.com/bqscWtG.png

1上載每天要添加新圖像的文件夾。

2上傳的圖像的縮略圖庫-縮略圖是由一個簡單的PHP腳本生成的，該腳本也創建了庫。

3將圖庫中的任何拇指發送到畫布。

我弄清楚了所有步驟，除了從2轉到3。

我發現的所有教程都只涉及通過客戶端上載在Canvas上繪制圖像，或者只專注於繪制通常位於.js文件中的url的單個圖像。

我正在考慮兩個選項：-將畫布添加到其中繪制了圖像的燈箱。 -在圖庫中有一個畫布，然后以某種方式在其中繪制完整尺寸的圖像。

是否有可以執行此操作的JavaScript庫？ （最好是一個演示版）

提前致謝！

Answer 1

也許您應該檢查一下：

http://www.w3schools.com/html/html5_canvas.asp

Answer 2

你的意思是這樣的嗎？

1張畫布中2張圖像。

<!DOCTYPE html>
<html>
<body>
<p>Image 1:</p><img id="mysqllogo" width="170" height="115" src="https://www.mysql.com/common/logos/logo-mysql-170x115.png" alt="MySQL Logo">
<p>Image 2:</p><img id="phplogo" width="200" height="120" src="http://php.net/manual/en/images/c0d23d2d6769e53e24a1b3136c064577-php_logo.png" alt="PHP Logo">
<p>Canvas:</p>
<canvas id="canvas1" width="400" height="200" style="border:1px solid #d3d3d3;"></canvas>

<script>
window.onload = function() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var img1 = document.getElementById("mysqllogo");
var img2 = document.getElementById("phplogo");
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img2, 125, 45)
};
</script>

</body>
</html>

從動態PHP庫到畫布的圖像，請提供一些建議

問題描述

2 個解決方案

解決方案1
0 2016-04-25 14:32:02

解決方案2
0 2016-04-25 15:42:09

從動態PHP庫到畫布的圖像，請提供一些建議

問題描述

2 個解決方案

解決方案1 0 2016-04-25 14:32:02

解決方案2 0 2016-04-25 15:42:09

解決方案1
0 2016-04-25 14:32:02

解決方案2
0 2016-04-25 15:42:09