用于使用畫布?jí)嚎s圖像的Html5示例代碼

1、用于使用畫布?jí)嚎s圖像的html5示例代碼前倆天做了一個(gè)轉(zhuǎn)base64上傳的功能，發(fā)覺假片的base64過大的話，哀求會(huì)變的很慢，嚴(yán)峻的挺直超時(shí)了，所以想到了在上傳前壓縮一下，然后再上傳到后臺(tái)，這樣可以大大的提高效率，在這里記錄一下利用 canvas 壓縮碰到的幾個(gè)坑。完整代碼會(huì)在文末給出。第一個(gè)坑，在壓縮的時(shí)候沒獵取本身的寬高，給了一個(gè) 600*480 的定寬定高，由于是手機(jī)端的，在上傳的時(shí)候都是幾兆的，所以這塊沒任何問題。出問題的地方在 修改頭像的時(shí)候，測(cè)試的時(shí)候上傳的都是小，然后就浮現(xiàn)了 壓縮后的顯示不徹低，大部分都是空白的現(xiàn)象，這就是由于在壓縮的時(shí)候沒有考慮原本的寬高的狀況。其次個(gè)坑，解

2、決第一個(gè)坑的方法就是在加載完成后（onload），獵取本身的寬高，然后賦值給 canvas ,這樣舉行操作，但是這有個(gè)坑就是，加載是異步的，在你 return 的時(shí)候，返回的可能是 undefined 而不是你需要的 壓縮后的 base64。這里的解決辦法是，新建一個(gè) promise ，然后把結(jié)果 resolve() 返回去，在調(diào)用的時(shí)候 .then() 得到結(jié)果。學(xué)問點(diǎn)： canvas 的 todataurl('image/png', 0.9) ; 把 canvas 畫的轉(zhuǎn)換為 base64,第一個(gè)參數(shù)表示的是的類型，其次個(gè)參數(shù)表示的是的清楚度。 規(guī)定一個(gè)最大尺寸，假片本身的

3、寬巍峨于這個(gè)尺寸，根據(jù)最大的一個(gè)邊舉行縮放，另一個(gè)按照的 比例 舉行設(shè)置，然后設(shè)置給 canvas . miniimage.jsexport default async function minisize(imgdata, maxsize = 200*1024) / const maxsize = 200 * 1024; if(imgdata && imgdata.files && imgdata.files.size img.addeventlistener('load', function() /原始尺寸 le

4、t originwidth = this.width; let originheight = this.height; / 最大尺寸限制 let maxwidth = 400, maxheight = 400; / 目標(biāo)尺寸 let targetwidth = originwidth, targetheight = originheight; / 尺寸超過400x400的限制 if (originwidth > maxwidth | originheight > maxheight) if (originwidth / originheight > maxwidth / ma

5、xheight) / 更寬，根據(jù)寬度限定尺寸 targetwidth = maxwidth; targetheight = math.round(maxwidth * (originheight / originwidth); else targetheight = maxheight; targetwidth = math.round(maxheight * (originwidth / originheight); canvas.width = targetwidth; canvas.height = targetheight; ctx.drawimage(img, 0, 0, targe

6、twidth, targetheight); let base64 = canvas.todataurl('image/png', 0.9); resolve(base64); , false); ) 調(diào)用：test.jsonchangeimg = async (files, type, index) => let previous = ps.imagepicker.files; if(type = "add") let result = minisize(filesfiles.length-1); /用法 .then() 調(diào)用獲得結(jié)果 await result.then(res => previous.push(url: res); ); else if(type = "remove") previous.splice(index,1); awa