HTML5聯(lián)合canvas實(shí)現(xiàn)圖片壓縮的代碼示例

發(fā)布時(shí)間：2020-04-24 15:43:18 來源：億速云閱讀：91 作者：小新欄目：web開發(fā)

這次給大家?guī)鞨TML5聯(lián)合canvas實(shí)現(xiàn)圖片壓縮的代碼示例，主要以代碼的形式體現(xiàn)，下面就是實(shí)戰(zhàn)案例，一起來看一下。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
 <title>lianxi </title>
 <style type="text/css">
    </style>
</head>
<body>
    <form>
 名字：<input type="text " name = 'username' id = 'username'/>
 上傳：<input type="file" name = 'fileimage' id = 'fileimage' />
 </form>
 <button>button</button>
 <script>
 var file = document.querySelector('#fileimage')
 var username = document.querySelector('#username')
 var canvas = document.createElement('canvas');
 var span = document.createElement('span')
 var formData = new FormData()
 file.addEventListener('change',function() {
 //實(shí)現(xiàn)的原理的new formData()然后把這個(gè)formData 用ajax傳進(jìn)去
 span.innerHTML = '預(yù)覽圖加載中...'
 document.body.appendChild(span)
 console.log(file.files[0])
 username.value ? formData.append('username',username.value) : null;
 resize(file.files[0]);
 })
 //上傳前的圖片壓縮
 function resize(file) {
 var reader = new FileReader()
 reader.readAsDataURL(file)
 var img = new Image()
 reader.onload = function (e) {
 // this.result就是圖片的base64地址信息
 img.src = this.result;
 }
 
 var context = canvas.getContext('2d');
 var gif = document.createElement('img')
 
 // base64地址圖片加載完畢后
 img.onload = function () {
 // 圖片原始尺寸
 //定義畫布的大小
 if (img.width > 300 || img.height > 300) {
 if (img.width > img.height) {
 canvas.width = 300
 canvas.height = img.height / img.width * 300
 }
 else {
 canvas.height = 300
 canvas.width = img.width / img.height * 300
 }
 }
 //從那里開始截取圖片
 context.drawImage(img, 0, 0, canvas.width, canvas.height)
 /*第一個(gè)參數(shù)是創(chuàng)建的img對(duì)象；第二個(gè)參數(shù)是左上角坐標(biāo)，后面兩個(gè)是畫布區(qū)域?qū)捀?/
 //壓縮后的圖片base64 url
                /*canvas.toDataURL(mimeType, qualityArgument),mimeType 默認(rèn)值是'image/jpeg';
                 * qualityArgument表示導(dǎo)出的圖片質(zhì)量，只要導(dǎo)出為jpg和webp格式的時(shí)候此參數(shù)才有效果，默認(rèn)值是0.92*/
 //var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
 document.body.removeChild(span)
 document.querySelector('body').appendChild(canvas)
 };
 }
 //這是上傳的
 document.querySelector('button').addEventListener('click',function(){
 canvas.toBlob(function(blob){
 var xhr = new XMLHttpRequest()
 formData.append('fileimage', blob,'002.webp')
 xhr.open('POST', 'test.php', true)//默認(rèn)true 為異步
 //上傳進(jìn)度
 xhr.upload.addEventListener('progress',function (e) {
 console.log('上傳進(jìn)度為：'+ (e.loaded/e.total*100).toFixed(2)+'%')//多次出現(xiàn)
 // event.total是需要傳輸?shù)目傋止?jié)，event.loaded是已經(jīng)傳輸?shù)淖止?jié)
 })
 xhr.upload.addEventListener('loadstart', function () {
 console.log('上傳開始')//只出現(xiàn)一次
 })
 xhr.onreadystatechange = function () {
 if (xhr.readyState === 4) {
 if (xhr.status >= 200 && xhr.status <300 || xhr.status == 304) {
 console.log(JSON.parse(xhr.responseText))//成功后的返回值
 }
 else {
 console.log("Request was unsuccessful: " + xhr.status);
 } 
 }
 
 }
 //xhr.setRequestHeader("Content-type", "multipart/form-data");
 xhr.send(formData)
 }, 'image/webp',0.9)
 })
 </script>
</body>
</html>

需要注意的是后端需要加上header("Access-Control-Allow-Origin:*");以實(shí)現(xiàn)跨域

以上就是HTML5聯(lián)合canvas實(shí)現(xiàn)圖片壓縮的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注億速云其它相關(guān)文章！

向AI問一下細(xì)節(jié)

HTML5聯(lián)合canvas實(shí)現(xiàn)圖片壓縮的代碼示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽