 |
| Canvas Photo Experiment HTML5 Canvas 實際執行畫面 |
使用方法：
首先載入程式所需要的 JavaScript 程式碼
//YUI的 JavaScript 原始碼
<script src="utilities.js" type="text/javascript" charset="utf-8"></script>
//Canvas 元素的操作
<script src="canvasElement.js" type="text/javascript" charset="utf-8"></script>
<script src="canvasImg.js" type="text/javascript" charset="utf-8"></script>
//讓舊的IE瀏覽器可以暫時支援 Canvas 元素
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
範例上的CSS設計
body { font: 75% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif; }
canvas { background-color: transparent; border: 1px solid gray; top: 0; left: 0; position: absolute; }
canvas.resize-ne { cursor: ne-resize; }
canvas.resize-se { cursor: se-resize; }
canvas.resize-sw { cursor: sw-resize; }
canvas.resize-nw { cursor: nw-resize; }
canvas.move { cursor: move; }
canvas.default { cursor: default; }
img { display: block; visibility: hidden; position: absolute; top: -1000; left: -1000; }
input { margin-left: 20px; }
fieldset { width: 280px; float: left; }
.fieldset { width: 200px; float: left; }
#ft { background-color: #eee; height: 70px; width: 99%; border-top: 1px solid #ccc; padding: 5px; position: absolute; top: 0; left: 0; }
#ft span { width: 100%; }
接下來HTML範例中是採用整個頁面的方式來設計
<body id="canvasdemo">
<canvas id="canvid1"></canvas>
<img id="img1" src="img/7.jpg" />
<img id="img2" src="img/8.jpg" />
<img id="img3" src="img/9.jpg" />
<img id="bg" src="img/bg.jpg" />
<div id="ft">
<div class="fieldset">
<input type="button" id="jpegbutton" value="Export to JPEG" />
<input type="button" id="pngbutton" value="Export to PNG (heavy)" />
</div>
<fieldset>
<legend>Photo</legend>
<span><input type="radio" name="some_name" value="" id="togglenone" /> <label for="togglenone">None</label></span>
<span><input type="radio" name="some_name" value="" id="toggleborders" /> <label for="toggleborders">Simple</label></span>
<span><input type="radio" name="some_name" value="" id="togglepolaroid" /> <label for="togglepolaroid">Polaroid™</label></span>
</fieldset>
<span><input type="checkbox" name="some_name" value="" id="showcorners" /> <label for="showcorners">Show corners</label></span>
</div>
</body>
最後是 JavaScript 的啟動程式碼
var CanvasDemo = function() {
var YD = YAHOO.util.Dom;
var YE = YAHOO.util.Event;
var canvas;
var img = [];
return {
init: function() {
canvas = new Canvas.Element();
canvas.init('canvid1', { width: YD.getViewportWidth() - 5, height: YD.getViewportHeight() - 5 });
img[img.length] = new Canvas.Img('img1', {});
img[img.length] = new Canvas.Img('img2', {});
img[img.length] = new Canvas.Img('img3', {});
img[img.length] = new Canvas.Img('bg', {});
//設定圖片進入
canvas.setCanvasBackground(img[3]);
canvas.addImage(img[0]);
canvas.addImage(img[1]);
canvas.addImage(img[2]);
this.initEvents();
},
initEvents: function() {
YE.on('togglebg','click', this.toggleBg, this, true);
YE.on('showcorners','click', this.showCorners, this, true);
YE.on('togglenone','click', this.toggleNone, this, true);
YE.on('toggleborders','click', this.toggleBorders, this, true);
YE.on('togglepolaroid','click', this.togglePolaroid, this, true);
YE.on('pngbutton','click', function() { this.convertTo('png') }, this, true);
YE.on('jpegbutton','click', function() { this.convertTo('jpeg') }, this, true);
},
switchBg: function() {
canvas.fillBackground = (canvas.fillBackground) ? false : true;
canvas.renderAll();
},
showCorners: function() {
this.cornersvisible = (this.cornersvisible) ? false : true;
this.modifyImages(function(image) {
image.setCornersVisibility(this.cornersvisible);
});
},
toggleNone: function() {
this.modifyImages(function(image) {
image.setBorderVisibility(false);
});
},
toggleBorders: function() {
this.modifyImages(function(image) {
image.setBorderVisibility(true);
});
},
togglePolaroid: function() {
this.modifyImages(function(image) {
image.setPolaroidVisibility(true);
});
},
modifyImages: function(fn) {
for (var i = 0, l = canvas._aImages.length; i < l; i += 1) {
fn.call(this, canvas._aImages[i]);
}
canvas.renderAll();
},
convertTo: function(format) {
var imgData = canvas.canvasTo(format);
window.open(imgData, "_blank");
},
whatever: function(e, o) {
// console.log(e);
// console.log(o);
}
}
}();
YAHOO.util.Event.on(window, 'load', CanvasDemo.init, CanvasDemo, true);
作者網站：http://www.ernestdelgado.com/public-tests/canvasphoto/
檔案大小：118 KB(包含範例不包含背景圖)
檔案下載：http://code.google.com/p/canvas-photo/source/browse
檔案備份：下載
0 意見