greasemonkey畫布腳本

最近我一直在研究一個Greasemonkey腳本，它會將圖像添加到某個頁面，http://fairview.deadfrontier.com確切地說，具有允許在添加的圖像上繪製的功能。greasemonkey畫布腳本

我對JavaScript沒有經驗，所以經過一段痛苦而漫長的過程後，我設法創建了一個獨立的腳本塊來完成這項工作，並且它在脫機使用.htm文件時工作得很好。

但是，當我將腳本上傳到userscripts.org並安裝在Greasemonkey中時，它停止工作。我將不勝感激任何想法或解決方案，可以幫助我完成腳本，以便我可以分享它。這是有問題的腳本在一個.htm文件：

~~www.megaupload.com/?d=C92KR3ZO~~ ~~pastebin.com/RTkx1YA7~~ 就在這裏：

<script type="text/javascript"> 
window.onload = function() { 

    var oCanvas = document.getElementById("thecanvas"); 
     var oCtx = oCanvas.getContext("2d"); 

    var iWidth = oCanvas.width; 
    var iHeight = oCanvas.height; 

    oCtx.fillStyle = "transparent"; 
    oCtx.fillRect(0,0,iWidth,iHeight); 

    oCtx.beginPath(); 
    oCtx.strokeStyle = "rgb(255,0,0)"; 

    oCanvas.onmousedown = function(e) { 
     bMouseIsDown = true; 
     iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
     iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
    } 
    oCanvas.onmouseup = function() { 
     bMouseIsDown = false; 
     iLastX = -1; 
     iLastY = -1; 
    } 
    oCanvas.onmousemove = function(e) { 
     if (bMouseIsDown) { 
      var iX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
      var iY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
      oCtx.moveTo(iLastX, iLastY); 
      oCtx.lineTo(iX, iY); 
      oCtx.stroke(); 
      iLastX = iX; 
      iLastY = iY; 
     } 
    } 
} 
document.write("<canvas width=\"356\" height=\"700\" style=\"border: 1px solid black; background-image:url('http:\/\/i.imgur.com\/fI3qz.jpg'); position:fixed; top:10px; left: 10px;\" id=\"thecanvas\"><\/canvas>"); 
</script>

我也設法上傳一個工作腳本，將新增的圖片，但沒有繪圖功能。所以，如果這是任何幫助，這裏的鏈接：

userscripts.org/scripts/show/95862/

謝謝！

來源

2011-02-02 sovq

sovq：未來，請使用類似pastebin.com的東西鏈接到大型代碼文件。 megaupload.com是一大痛苦。 – 2011-02-02 14:25:59

好的，以下是我在該文件（canvas.htm）中看到的關於轉換爲GM的一般問題。
最嚴重的第一：

不/不能使用document.write。使用類似：

var zNode  = document.createElement ('canvas'); 
zNode.setAttribute ('id', 'thecanvas'); 
document.body.appendChild (zNode);

在Greasemonkey的，event handlers can't be set like：

oCanvas.onmousedown = function(e) { ......

用途：

oCanvas.addEventListener 
(
    "mousedown", 
    function (e) 
    { 
     bMouseIsDown = true; 
     iLastX = e.clientX - oCanvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft); 
     iLastY = e.clientY - oCanvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop); 
    }, 
    true 
);

不要使用內聯樣式，你會爲自己節省很多的痛苦。如果你創建canvas節點，每個項目1，那麼你可以使用這個Greasemonkey的樣式是：

GM_addStyle ((<><![CDATA[ 
    #thecanvas 
    { 
     width:    356px; 
     height:    700px; 
     border:    1px solid black; 
     background-image: url('http://i.stack.imgur.com/fI3qz.jpg'); 
     position:   fixed; 
     top:    10px; 
     left:    10px; 
    } 
]]></>).toString());

的X/Y數學是關閉的，考慮到畫布的一部分時，大頁面。
bMouseIsDown似乎被用作全局變量;它應該如此設置。

無論如何，這應該是足以讓你的GM腳本的工作，重新開始。如果是這樣，請將此問題標記爲已回答。
對於任何後續問題，請在問題主體中包含腳本的完整代碼（但代碼格式爲StackOverflow）。

來源

2011-02-02 15:32:13

greasemonkey畫布腳本

回答

相關問題