fabric.js 拍貼機

使用fabric.js+php所製作的拍貼機，使用者可合成相片並下載。

 PC版:https://fgophoto12.000webhostapp.com/

 手機版:https://fgophoto12.000webhostapp.com/mobile.php

留言

張貼留言

這個網誌中的熱門文章

PHP讀資料庫的資料，保留換行及空格

PHP讀資料庫的資料，保留換行 參考網址: http://www.wibibi.com/info.php?tid=323 PHP nl2br 函式會在字串中的「行」之前加上  HTML 換行 標籤 <br> 讓瀏覽器正確顯示換行排版，而不是每一行都連在一起。通常用於當輸入端在網頁的文字輸入欄位  textarea  輸入含有換行文字段落，存入資料庫後，代表換行的符號如「\n」也會存入資料庫中，但是當 PHP 從資料庫中將資料讀取出來，顯示於網頁時，並不會自動換行，這時候就必須用 nl2br 函式將字串的「\n」先轉換為  HTML 換行 標籤。 PHP nl2br 基本語法 nl2br( $string ) 語法小括號中的字串 $string 為必填項目，就是要轉換的字串，nl2br 可以判斷的換行符號如  \r\n 、 \n\r 、 \n  與  \r ，遇到字串中有這些符號的時候，nl2br 便會將其轉換為 <br>、<br/> 或 </br> 標籤，並返回轉換結果。 PHP nl2br 範例 <?php $new_string = "Welcome to Wibibi.\nIt was a very nice day."; echo  nl2br ($new_string); ?> 以上輸出網頁結果 Welcome to Wibibi. It was a very nice day. 檢視程式碼 Welcome to Wibibi. <br /> It was a very nice day. -------------------------------------------------------------------------------------------------------------------------- PHP讀資料庫的資料，保留空格 參考網址: https://codeday.me/bug/20180309/141593.html 使用<pre></pre>標籤包住內容即可。
閱讀完整內容

fabric.js 教學 (隨便紀錄)

範例網址: https://fgophoto12.000webhostapp.com 1.創建一個canvas畫板並加上背圖 //preserveObjectStacking: true - 選中的物件不會置頂 var canvas = new fabric.Canvas('draw',{ backgroundImage: "assets/img/fgo-card.jpg",preserveObjectStacking: true});//創建一個canvas畫板並加上背圖 2.在畫布新增一個圖片 fabric.Image.fromURL('assets/img/patten/hreat1.png', function(img) {     img.scale(1).set({       left: 150,       top: 150,       angle: 0,       lockRotation: true,//旋轉控制失效       type:'st'//可用來替物件命名     });       canvas.add(img); }); 3.下載canvas圖片(搭配php) $('.download').click(function(){ //取消选择画布上的一个或多个对象 // canvas.deactivateAll().renderAll(); var fullQuality = canvas.toDataURL("image/png").replace("image/png","image/octet-stream"); var type = 'png';//图片导出为 png 格式 // console.log(fullQuality); var saveFile = function(data, filename){//這段一定要放前面     var save_link...
閱讀完整內容

FACEBOOK 自訂分享圖片及內容至塗鴉牆

1.先至  https://developers.facebook.com  申請APP應用程式，並設定好基本資料再按開啟鈕。 2.引入SDK          window.fbAsyncInit = function() {     FB.init({       appId      : '你的APPID',       xfbml      : true,       version    : 'v3.2'     });     FB.AppEvents.logPageView();   };   (function(d, s, id){      var js, fjs = d.getElementsByTagName(s)[0];      if (d.getElementById(id)) {return;}      js = d.createElement(s); js.id = id;      js.src = "https://connect.facebook.net/en_US/sdk.js";      fjs.parentNode.insertBefore(js, fjs);    }(document, 'script', 'facebook-jssdk')); 3.自訂分享內容程式碼 var img = "https://fgophoto12.000webhostapp.com/"+data; var desc = "your caption here"; var link = 'https://fgophoto12.000webhostapp.com'; // Open F...
閱讀完整內容