FireFox下Canvas使用圖像合成繪製SVG的Bug

時間 2019-11-06

標籤 firefox canvas 使用圖像合成繪製 svg bug 欄目 Firefox 简体版

原文原文鏈接

本文適合適合對canvas繪製、圖形學、前端可視化感興趣的讀者閱讀。

楔子

全部的事情都會有一個原由。
最近產品上須要作一個這樣的功能：給一些圖形進行染色處理。想一想這還不是順手拈來的事情，早就研究過圖形染色的技術。因而我把以前寫好的兩種算法發給了小夥伴，讓他參照實現，第一種算法是操縱像素、第二種使用了圖像合成：globalCompositeOperation。
全部的事情均可能會有意外，寫程序更是如此了。
沒多久，小夥伴說，第二種算法在firefox下不起做用。html

探索緣由

據說有bug，心中一驚。我測試過了的，FireFox下面也測試過的。因而我打開火狐瀏覽器，啓動示例，發現是好的，沒有問題。
可是小夥伴集成到產品中就有問題。差異在哪兒呢？經過一塊兒排查，最終發現個人示例代碼和產品中代碼的一個區別是：示例代碼用的是png圖片，而產品中用的是svg圖片。
難道是svg圖片的問題，拿一個svg圖片放到示例代碼中，果真不對。結論已經明顯：
FireFox瀏覽器下，用Canvas下繪製繪製SVG圖的時候，globalCompositeOperation的設置將不生效。
下面是一段用於測試的代碼，ctx.globalCompositeOperation = 'destination-out' 表示用源圖像的形狀去挖空目標圖像。
在其餘瀏覽器中，如下代碼中是生效的，又挖空的效果。可是在
在FireFox 下不生效：前端

<html>
<head>
    <script>
        function init() {
            var canvas = document.getElementById('c');
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.onload = function () {
                ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2);
                ctx.globalCompositeOperation = 'destination-out';
            }
            img.src = 'diffuse.png';
            var svg = new Image;
            svg.src = "./d.svg";
                    
            function drawPoint(pointX, pointY) {
                ctx.drawImage(svg, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2);
            }
            canvas.addEventListener('click', function (e) {
                drawPoint(e.clientX, e.clientY);
            }, false);
        }
    </script>
</head>
<body onload="init();" style="background: red">
    <div>
        <canvas id="c" width="1000" height="1000"></canvas>
    </div>
</body>
</html>>

如何解決

找到問題的緣由了，解決方法其實簡單。
事情每每就是這樣，不少時候，找到問題所在每每比解決問題要難。
解決方案其實很簡單java

代碼中加入判斷，判斷瀏瀏覽器是不是FireFox。
若是是，則先把svg圖片繪製到臨時的canvas上面。
後續繪製用臨時的canvas替代svg圖片。

好比上面代碼能夠改進以下：node

function init() {
            var canvas = document.getElementById('c');
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.onload = function () {
                ctx.drawImage(img, 0, 0, img.width * 2, img.height * 2);
                ctx.globalCompositeOperation = 'destination-out';
            }
            img.src = 'diffuse.png';
            var svg = new Image;
            svg.src = "./d.svg";
                      
        var tempCanvas = svg;  
                         if(isFirefox){
                             svg.onload = function(){
                                  tempCanvas = document.createElement('canvas');
                                tempCanvas.width = svg.width;
                                tempCanvas.height = svg.height;
                                var tempCtx = tempCanvas.getContext('2d');
                                tempCtx.drawImage(svg,0,0,svg.width,svg.height);
                             }           
                         }
                      
            function drawPoint(pointX, pointY) {
                            
                ctx.drawImage(tempCanvas, pointX - svg.width / 4, pointY - svg.height / 4, svg.width / 2, svg.height / 2);
            }
            canvas.addEventListener('click', function (e) {
                drawPoint(e.clientX, e.clientY);
            }, false);
        }

歡迎關注公衆號「ITman彪叔」。彪叔，擁有10多年開發經驗，現任公司系統架構師、技術總監、技術培訓師、職業規劃師。熟悉Java、JavaScript、Python語言，熟悉數據庫。熟悉java、nodejs應用系統架構，大數據高併發、高可用、分佈式架構。在計算機圖形學、WebGL、前端可視化方面有深刻研究。對程序員思惟能力訓練和培訓、程序員職業規劃有濃厚興趣。
程序員

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。