更改光标图像时未找到数据uri
问题描述:
function rotateImageOnCanvas(path) {
fighterJets = [];
var img = new Image();
img.src = path;
img.onload = function() {
this.width = 30;
this.height = 30;
var can = document.createElement('canvas');
var ctx = can.getContext('2d');
ctx.drawImage(this, 0, 0, this.width, this.height);
for(d=0;d<360;d++) {ctx.rotate(1);fighterJets.push(can.toDataURL());}
};
}
我试图从服务器上加载图像。一旦加载,然后旋转画布上的图像,并将数据uri存储在数组中以供以后使用,而无需再次对服务器进行调用。但是当我尝试用数据uri更改光标图像时,我在firefox中得到了“无效的属性值”更改光标图像时未找到数据uri
parameter.style.cursor = 'url('+fighterJets[90]+') 15 15, auto'
我检查了数据uri是参数的style属性(它非常大,我不能错过它)。所以我失去了下一步该做什么。我可怜的canavas低估,我怀疑我做错了什么,你可以分配数据uri光标图像,如果没有任何解决方法。欢迎任何帮助
答
经过大量的反复试验后,我意识到我得到无效的“无效的财产价值”,因为我没有匹配的图像canavas大小,从而产生的图像变得很大,因此是没有显示在光标上。以下是工作代码。
function rotateFighterJetOnCanvas(path,degrees) {
var img = new Image();
img.src = path;
img.onload = function() {
var can = document.createElement('canvas');
var ctx = can.getContext('2d');
can.width =30;can.height =30;
ctx.translate(15, 15);
ctx.rotate(Math.radians(degrees));
ctx.imageSmoothingEnabled = false;
ctx.drawImage(this, -15, -15, 30, 30);
ctx.rotate(-Math.radians(degrees));
ctx.translate(-15, -15);
fighterJets.push(can.toDataURL("image/png",1.0));
};
}
Math.radians = function(degrees) {
return degrees * Math.PI/180;
};
base64解码在cpu性能方面有多快?我浏览过网页,找不到这个简单的答案。我真的需要知道,以秒或毫秒为单位解码2.5 kb base64字符串有多快。请人吗? –