getDataURL用于画布对象的一部分
我正在构建一个firefox插件，允许用户在对象上绘制任意图形并将其保存为图像（png文件）。
var $ = getJQueryOb();
var canvas = '<canvas id="canvas" width="1024" height="1024" style="position:absolute; top:0px; left:0px;"></canvas>';
var currentWindow = Components.classes["@mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("navigator:browser");
var mainDoc = currentWindow.getBrowser().contentDocument;
var cObj = $(canvas).appendTo(mainDoc.body);
$(cObj).bind('mousemove', handlePenDraw);
var $ = getJQueryOb();
var canvas = $('#canvas')[0];
var dURL = canvas.toDataURL("image/png");
saveToFile(dURL, "image-file.png");
没有找到相关结果
已邀请:
1 个回复
曝匿弄罚
// Set these with these in your handlePenDraw method. var topLeftPoint, bottomRightPoint; var width = bottomRightPoint.x - topLeftPoint.x; var height = bottomRightPoint.y - topLeftPoint.y; // Retrieve the area of canvas drawn on. var imageData = context.getImageData(topLeftPoint.x, topLeftPoint.y, width, height); // Create a new canvas and put the retrieve image data on it var newCanvas = document.createElement("canvas"); newCanvas.width = width; newCanvas.height = height; newCanvas.getContext("2d").putImageData(imageData, 0, 0); // Now call save to file with your new canvas var dURL = newCanvas.toDataURL("image/png"); saveToFile(dURL, "image-file.png");