从动态PHP库到画布的图像，请提供一些建议
[英]Images from a dynamic php gallery to canvas, some advice please
问题描述
I'm looking for some advice on a web app I'm trying to make. 
我正在尝试制作一个Web应用程序，以寻求一些建议。
A little flow chart describing my project: http://i.imgur.com/bqscWtG.png 一些描述我的项目的流程图： http : //i.imgur.com/bqscWtG.png
1 Upload folder where new images are being added daily. 1上载每天要添加新图像的文件夹。
2 Thumbnail gallery of the images uploaded - Thumbs are generated by a simple php script that also creates the gallery. 2上传的图像的缩略图库-缩略图是由一个简单的PHP脚本生成的，该脚本也创建了库。
3 Send any thumb from the gallery to a Canvas. 3将图库中的任何拇指发送到画布。
I figured out all the steps, except for going from 2 to 3. 我弄清楚了所有步骤，除了从2转到3。
All the tutorials I have found only deal with drawing an image on Canvas via a client upload, or only focus on drawing a single image where the url is usually located in a .js file. 我发现的所有教程都只涉及通过客户端上载在Canvas上绘制图像，或者只专注于绘制通常位于.js文件中的url的单个图像。
Two options I'm considering: - Add a Canvas to a lightbox with the image drawn in it. 我正在考虑两个选项：-将画布添加到其中绘制了图像的灯箱。 - Have a Canvas inside the gallery, and somehow draw the full size image on there. -在图库中有一个画布，然后以某种方式在其中绘制完整尺寸的图像。
Is there a javascript library which can do this? 是否有可以执行此操作的JavaScript库？ (preferably one with a demo) （最好是一个演示版）
Thanks in advance! 提前致谢！
2 个解决方案
解决方案1
0 2016-04-25 14:32:02
maybe you should check this out: 也许您应该检查一下：
http://www.w3schools.com/html/html5_canvas.asp http://www.w3schools.com/html/html5_canvas.asp
解决方案2
0 2016-04-25 15:42:09
You mean something like this? 你的意思是这样的吗？
2 images in 1 canvas. 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.