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画布脚本

回答

相关问题