廢話不多說，使用html的標籤可以支援檔案上傳，前端上傳驗證的話，設定accept="image/*"將檔案型別限制為影象。
classname="btnupload"
style=}>
classname="upload"
type="file"
accept="image/ * "
ref="imginput"
onchange=/>
uploadimg = event =>
var orientation = "";
//exif js 可以讀取的元資訊
exif.getdata(file, function
() );
var reader = new filereader();
// 將檔案以data url形式進行讀入頁面
reader.readasdataurl(file);
reader.onload = function
() that.setstate()
};//處理ios**旋轉
(async function (context) )(this);};}
//處理ios**翻轉
rotateimage = (img, dir) =>
//使用canvas旋轉校正
context.rotate(degree * math.pi / 180);
context.drawimage(this, 0, 0, drawwidth, drawheight);
//返回校正
resolve(canvas.todataurl("image/jpeg", 1));
}image.src = img;
});}
複製**html
"preview-box" style=} onclick=>複製**
到此完成了的上傳和預覽，接下來處理海報合成，背景圖是640*1136大小的，但是上傳的可以是五花八門的，有可能是方的，也有可能是非常長的- -，需要保證不變形並顯示中心部分，因此需要比較**的寬高比與背景的寬高比，並拉伸壓縮至寬度或高度與背景相同，然後裁剪中間部分。
var canvas = document.createelement('canvas');
var ctx = canvas.getcontext('2d');
canvas.width = 640;
canvas.height = 1136;
//處理等比拉伸壓縮使用者並居中裁剪
var imgratio = canvas.width / canvas.height; //目標的寬高比
var userimgratio = that.state.sourceimg.width / that.state.sourceimg.height; //原始的寬高比
var r = (userimgratio > imgratio)
? (canvas.height / that.state.sourceimg.height)
: (canvas.width / that.state.sourceimg.width);
var drawobj = ;
//居中裁剪
ctx.drawimage(that.state.sourceimg, drawobj.sx, drawobj.sy, drawobj.swidth, drawobj.sheight, drawobj.dx, drawobj.dy, drawobj.dwidth, drawobj.dheight);
複製**
canvas的drawimage方法總共有9個引數
如圖示，上傳了一張尺寸小且為正方形的，先根據背景計算寬高比，在使用者中裁剪出乙個寬高比與背景寬高比一樣的最大範圍，並且裁剪中心部分，獲得開始裁剪的點，左上角這個點x座標為(that.state.sourceimg.width - canvas.width / r) / 2，y座標為0，對應sx和sy引數，被剪下影象的寬高是中間部分的寬高（四個黃點所圍），即引數中的swidth為canvas.width / r，sheight為canvas.height / r，最終放置位置為鋪滿canvas，即x=0,y=0，最終大小即為canvas的大小，會拉伸鋪滿canvas，最終實現了「獲取使用者中心部分並鋪滿背景的效果」
最後將背景圖與上傳的繪製在一起，並生成base64格式，可以長按儲存。
var newimg = new image();
newimg.src = "/src/images/bg.png";
newimg.onload = function
() )
};複製**
原始碼位址 爬蟲小專案
將爬取到的資料儲存在csv檔案中 由於習慣 作者會將獲取到的資料儲存 然後在儲存的檔案中進行匹配 這樣會降低程式執行時間 import requests from lxml import html from bs4 import beautifulsoup url headers res reque...
前端 小專案
全部42區 段子愛了 你問我答 註冊登入 最熱最新 人類發布 即時順序 24小時 3天發布 人們都說 桂林山水甲天下。我們乘著木船蕩漾在漓江上，來觀賞桂林的山水。人們都說 桂林山水甲天下。我們乘著木船蕩漾在漓江上，來觀賞桂林的山水。人們都說 桂林山水甲天下。我們乘著木船蕩漾在漓江上，來觀賞桂林的山水...
大專案小專案
很多人責怪第一門計算機語言的老師不行 我也是的 雖然那個時候自己無心也無力對老師進行評價 現在想想只能用 誤人子弟 來形容這位尊敬的副院長 很神奇授課的時候把大學的東西搞明白了 小碩的時候把授課的東西搞明白了 工作了把小碩的東西搞明白了 永遠都慢了一拍 那什麼時候才能把工作的東西搞明白？今年的工作接...