从动态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