Images from a dynamic php gallery to canvas, some advice please
Question
I'm looking for some advice on a web app I'm trying to make.
A little flow chart describing my project: http://i.imgur.com/bqscWtG.png
1 Upload folder where new images are being added daily.
2 Thumbnail gallery of the images uploaded - Thumbs are generated by a simple php script that also creates the gallery.
3 Send any thumb from the gallery to a Canvas.
I figured out all the steps, except for going from 2 to 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.
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? (preferably one with a demo)
Thanks in advance!
2 answers
solution1
0 2016-04-25 14:32:02
maybe you should check this out:
solution2
0 2016-04-25 15:42:09
You mean something like this?
2 images in 1 canvas.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.