詳解FireFox下Canvas使用圖像合成繪制SVG的Bug
我要評(píng)論本文適合適合對(duì)canvas繪制、圖形學(xué)、前端可視化感興趣的讀者閱讀。
楔子
所有的事情都會(huì)有一個(gè)起因。
最近產(chǎn)品上需要做一個(gè)這樣的功能：給一些圖形進(jìn)行染色處理。想想這還不是順手拈來(lái)的事情，早就研究過(guò)圖形染色的技術(shù)。于是我把之前寫(xiě)好的兩種算法發(fā)給了小伙伴，讓他參照實(shí)現(xiàn)，第一種算法是操縱像素、第二種使用了圖像合成：globalCompositeOperation。
所有的事情都可能會(huì)有意外，寫(xiě)程序更是如此了。
沒(méi)多久，小伙伴說(shuō)，第二種算法在firefox下不起作用。
探索原因
聽(tīng)說(shuō)有bug，心中一驚。我測(cè)試過(guò)了的，F(xiàn)ireFox下面也測(cè)試過(guò)的。于是我打開(kāi)火狐瀏覽器，啟動(dòng)示例，發(fā)現(xiàn)是好的，沒(méi)有問(wèn)題。
但是小伙伴集成到產(chǎn)品中就有問(wèn)題。 差別在哪兒呢？ 通過(guò)一起排查，最終發(fā)現(xiàn)我的示例代碼和產(chǎn)品中代碼的一個(gè)區(qū)別是：示例代碼用的是png圖片，而產(chǎn)品中用的是svg圖片。
難道是svg圖片的問(wèn)題，拿一個(gè)svg圖片放到示例代碼中，果然不對(duì)。結(jié)論已經(jīng)明顯：
FireFox瀏覽器下，用Canvas下繪制繪制SVG圖的時(shí)候，globalCompositeOperation的設(shè)置將不生效。
下面是一段用于測(cè)試的代碼，ctx.globalCompositeOperation = 'destination-out' 表示用源圖像的形狀去挖空目標(biāo)圖像。
在其他瀏覽器中，以下代碼中是生效的，又挖空的效果。但是在
在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>
如何解決
找到問(wèn)題的原因了，解決方法其實(shí)簡(jiǎn)單。
事情往往就是這樣，很多時(shí)候，找到問(wèn)題所在往往比解決問(wèn)題要難。
解決方案其實(shí)很簡(jiǎn)單
代碼中加入判斷，判斷瀏瀏覽器是否是FireFox。
如果是，則先把svg圖片繪制到臨時(shí)的canvas上面。
后續(xù)繪制用臨時(shí)的canvas替代svg圖片。
比如上面代碼可以改進(jìn)如下：
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);
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
html5中svg canvas和圖片之間相互轉(zhuǎn)化思路代碼
需要把網(wǎng)頁(yè)部分內(nèi)容做正文，并把原網(wǎng)頁(yè)轉(zhuǎn)成pdf作為附件，發(fā)送郵件給boss，將svg轉(zhuǎn)成canvas顯示，但是后來(lái)發(fā)現(xiàn)canvas也無(wú)法正常顯示，最后不得已，只能將canvas標(biāo)簽再一次轉(zhuǎn)2014-01-24HTML5之SVG 2D入門(mén)13—svg對(duì)決canvas及長(zhǎng)處和適用場(chǎng)景分析
到目前為止，SVG與Canvas的主要特性均已經(jīng)總結(jié)完畢了,現(xiàn)在，我們就來(lái)比對(duì)一下這兩種技術(shù)，分析一下它們的長(zhǎng)處和適用場(chǎng)景,感興趣的朋友可以了解下哦，或許對(duì)你有所幫助2013-01-30- canvas 與 SVG都能夠使你在瀏覽器中畫(huà)圖，但它們的基本原理不同,接下來(lái)將對(duì)canvas 與 SVG的畫(huà)圖原理進(jìn)行介紹，感興趣的朋友可以了解下2013-01-16
- Canvas和SVG都是HTML5中的圖形渲染技術(shù)，那么你知道這兩種有哪些區(qū)別嗎，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2023-05-11