开心六月综合激情婷婷|欧美精品成人动漫二区|国产中文字幕综合色|亚洲人在线成视频

    • 

        <b id="zqfy3"><legend id="zqfy3"><fieldset id="zqfy3"></fieldset></legend></b>
          <ul id="zqfy3"></ul>
          

          <blockquote id="zqfy3"><strong id="zqfy3"><dfn id="zqfy3"></dfn></strong></blockquote>
          <blockquote id="zqfy3"><legend id="zqfy3"></legend></blockquote>
          


          

          




















          



          



          
打開APP

          
userphoto

          

          

          


          

          

          未登錄
          

          開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服
          

          
開通VIP

          

          

          首頁
          

          好書
          

          留言交流
          

          下載APP
          

          聯(lián)系客服
          

          

          

          

          

          

          

          

          

          

          

          

          

          解決canvas轉(zhuǎn)base64/jpeg時(shí)透明區(qū)域變成黑色背景的方法
          


          


          

          

          

           
           
           
           
          最近在工作遇到一個(gè)問題，在將png圖片轉(zhuǎn)jpeg時(shí)，透明區(qū)域被填充成黑色，通過網(wǎng)上的介紹找到了解決的方法，現(xiàn)在總結(jié)下分享給同樣遇到這個(gè)問題的朋友們，感興趣的可以通過本文詳細(xì)學(xué)習(xí)下。
           
           
          在用canvas將png圖片轉(zhuǎn)jpeg時(shí)，發(fā)現(xiàn)透明區(qū)域被填充成黑色。
          代碼如下：
          XML/HTML Code復(fù)制內(nèi)容到剪貼板
          1. <p>Canvas：</p>  
          2. <canvas id="canvas" style="border: 1px solid #ccc;"></canvas>  
          3. <br>  
          4. <p>Base64轉(zhuǎn)碼后的圖片：</p>  
          5. <div id="base64Img"></div>  
          6.   
          7. <script type="text/javascript">  
          8.     var base64Img = document.getElementById("base64Img"),   
          9.         canvas = document.getElementById("canvas"),   
          10.         context = canvas.getContext("2d");   
          11.   
          12.     // 創(chuàng)建新圖片   
          13.     var img = new Image();   
          14.     img.src = "1.png";   
          15.   
          16.     img.addEventListener("load", function() {   
          17.         // 繪制圖片到canvas上   
          18.         canvas.width = img.width;   
          19.         canvas.height = img.height;   
          20.   
          21.         context.drawImage(img, 0, 0);   
          22.   
          23.         getBase64(canvas, function(dataUrl) {   
          24.             // 展示base64位的圖片   
          25.             var newImg = document.createElement("img");   
          26.                 newImg.src = dataUrl;   
          27.   
          28.             base64Img.appendChild(newImg);   
          29.         });   
          30.     }, false);   
          31.   
          32.     // 獲取canvas的base64圖片的dataURL（圖片格式為image/jpeg）   
          33.     function getBase64(canvas, callback) {   
          34.         var dataURL = canvas.toDataURL("image/jpeg");   
          35.   
          36.         if(typeof callback !== undefined) {   
          37.             callback(dataURL);   
          38.         }   
          39.     }   
          40. </script>  
          效果如下：
          為什么canvas會(huì)png的透明區(qū)域轉(zhuǎn)成黑色呢？
          canvas轉(zhuǎn)換成jpeg之前移除alpha通道，所以透明區(qū)域被填充成了黑色。
          但是，我們希望的是，canvas可以將png的透明區(qū)域填充成白色。
          那么怎么將canvas中的透明區(qū)域填充成白色呢？
          以下是我實(shí)踐過的兩種解決方案，希望對你有幫助。
          解決方案一：將透明的pixel設(shè)成白色
          因?yàn)閜ng圖片的背景都是透明的，所以我們可以尋找透明的pixel，然后將其全部設(shè)置成白色，核心代碼如下：
          JavaScript Code復(fù)制內(nèi)容到剪貼板
          1. // 將canvas的透明背景設(shè)置成白色   
          2. var imageData = context.getImageData(0, 0, canvas.width, canvas.height);   
          3. for(var i = 0; i < imageData.data.length; i += 4) {   
          4.     // 當(dāng)該像素是透明的，則設(shè)置成白色   
          5.     if(imageData.data[i + 3] == 0) {   
          6.         imageData.data[i] = 255;   
          7.         imageData.data[i + 1] = 255;   
          8.         imageData.data[i + 2] = 255;   
          9.         imageData.data[i + 3] = 255;    
          10.     }   
          11. }   
          12. context.putImageData(imageData, 0, 0);  
          完整代碼如下：
          XML/HTML Code復(fù)制內(nèi)容到剪貼板
          1. <p>Canvas：</p>  
          2. <canvas id="canvas" style="border: 1px solid #ccc;"></canvas>  
          3. <br>  
          4. <p>Base64轉(zhuǎn)碼后的圖片：</p>  
          5. <div id="base64Img"></div>  
          6.   
          7. <script type="text/javascript">  
          8.     var base64Img = document.getElementById("base64Img"),   
          9.         canvas = document.getElementById("canvas"),   
          10.         context = canvas.getContext("2d");   
          11.   
          12.     // 創(chuàng)建新圖片   
          13.     var img = new Image();   
          14.     img.src = "1.png";   
          15.   
          16.     img.addEventListener("load", function() {   
          17.         // 繪制圖片到canvas上   
          18.         canvas.width = img.width;   
          19.         canvas.height = img.height;   
          20.   
          21.         context.drawImage(img, 0, 0);   
          22.   
          23.         // 將canvas的透明背景設(shè)置成白色   
          24.         var imageData = context.getImageData(0, 0, canvas.width, canvas.height);   
          25.         for(var i = 0; i < imageData.data.length; i += 4) {   
          26.             // 當(dāng)該像素是透明的，則設(shè)置成白色   
          27.             if(imageData.data[i + 3] == 0) {   
          28.                 imageData.data[i] = 255;   
          29.                 imageData.data[i + 1] = 255;   
          30.                 imageData.data[i + 2] = 255;   
          31.                 imageData.data[i + 3] = 255;    
          32.             }   
          33.         }   
          34.         context.putImageData(imageData, 0, 0);   
          35.   
          36.         // 展示base64位的圖片   
          37.         getBase64(canvas, function(dataUrl) {   
          38.             var newImg = document.createElement("img");   
          39.                 newImg.src = dataUrl;   
          40.   
          41.             base64Img.appendChild(newImg);   
          42.         });   
          43.     }, false);   
          44.   
          45.     // 獲取canvas的base64圖片的dataURL（圖片格式為image/jpeg）   
          46.     function getBase64(canvas, callback) {   
          47.         var dataURL = canvas.toDataURL("image/jpeg");   
          48.   
          49.         if(typeof callback !== undefined) {   
          50.             callback(dataURL);   
          51.         }   
          52.     }   
          53. </script>  
          效果如下：
          缺點(diǎn)顯而易見。當(dāng)png圖片上存在半透明區(qū)域時(shí)，會(huì)將其填充為黑色。這是我們不希望的。
          解決方案二：在canvas繪制前填充白色背景
          核心代碼如下：
          JavaScript Code復(fù)制內(nèi)容到剪貼板
          1. // 在canvas繪制前填充白色背景   
          2. context.fillStyle = "#fff";   
          3. context.fillRect(0, 0, canvas.width, canvas.height);  
          完整代碼如下：
          XML/HTML Code復(fù)制內(nèi)容到剪貼板
          1. <p>Canvas：</p>  
          2. <canvas id="canvas" style="border: 1px solid #ccc;"></canvas>  
          3. <br>  
          4. <p>Base64轉(zhuǎn)碼后的圖片：</p>  
          5. <div id="base64Img"></div>  
          6.   
          7. <script type="text/javascript">  
          8.     var base64Img = document.getElementById("base64Img"),   
          9.         canvas = document.getElementById("canvas"),   
          10.         context = canvas.getContext("2d");   
          11.   
          12.     // 創(chuàng)建新圖片   
          13.     var img = new Image();   
          14.     img.src = "1.png";   
          15.   
          16.     img.addEventListener("load", function() {   
          17.         // 繪制圖片到canvas上   
          18.         canvas.width = img.width;   
          19.         canvas.height = img.height;   
          20.   
          21.         // 在canvas繪制前填充白色背景   
          22.         context.fillStyle = "#fff";   
          23.         context.fillRect(0, 0, canvas.width, canvas.height);   
          24.   
          25.         context.drawImage(img, 0, 0);   
          26.   
          27.         // 展示base64位的圖片   
          28.         getBase64(canvas, function(dataUrl) {   
          29.             var newImg = document.createElement("img");   
          30.                 newImg.src = dataUrl;   
          31.   
          32.             base64Img.appendChild(newImg);   
          33.         });   
          34.     }, false);   
          35.   
          36.     // 獲取canvas的base64圖片的dataURL（圖片格式為image/jpeg）   
          37.     function getBase64(canvas, callback) {   
          38.         var dataURL = canvas.toDataURL("image/jpeg");   
          39.   
          40.         if(typeof callback !== undefined) {   
          41.             callback(dataURL);   
          42.         }   
          43.     }   
          44. </script>  
          效果如下：
          Perfect！
          顯然，在canvas繪制前填充白色背景這種方法，不僅簡單，而且對png圖片的半透明區(qū)域填充難看的黑色塊。推薦這種解決方案。
          另：canvas.toDataURL()方法不允許處理跨域圖片。否則會(huì)報(bào)錯(cuò)。
          總結(jié)
          以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。 
           
          

          

          本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。
          

          

          


打開APP，閱讀全文并永久保存
查看更多類似文章

          

          

          

          猜你喜歡

          

          

          


          

          

          類似文章
          

          

          在瀏覽器端用H5實(shí)現(xiàn)圖片壓縮上傳
          HTML5 Canvas像素處理使用接口介紹
          H5：畫布Canvas基礎(chǔ)知識(shí)講解（一）之插入圖像、像素級(jí)操作、文字
          了解 JS 壓縮圖片，這一篇就夠了
          將canvas元素中的圖像轉(zhuǎn)換為jpg等格式的Blob對象
          mui H5+ 調(diào)取 相冊 拍照 功能 上傳圖片 + 裁剪功能
          

          
更多類似文章 >>

          

          


          

          

          

          
生活服務(wù)

          

          

          


          

          


          



          


          

          

          




          

          




          
分享
收藏
導(dǎo)長圖
關(guān)注

下載文章

          


          

          綁定賬號(hào)成功
          后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！
          

          如果VIP功能使用有故障，
          可點(diǎn)擊這里聯(lián)系客服！
          聯(lián)系客服